HTML打字机和字体发光效果

最新推荐文章于 2025-01-12 22:34:51 发布

原创最新推荐文章于 2025-01-12 22:34:51 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

Web前端专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，该页面使用JavaScript实现了打字机效果的文字显示。通过定时器逐字符展示一段欢迎文字，并利用CSS为文字添加了闪烁效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>HTML打字机</title>
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
		<script>
			var text = "欢迎来到giao电影网"
			var sudu = 100
			var seq = 0
			function type() {
				texts.innerHTML = text.substring(0, seq);
				if (text.length == 0) {
					seq = 0
					setInterval();
				} else {
					seq++;
					let clearType=setTimeout("type()", sudu);
					if(seq==text.length){
						clearInterval(clearType)
					}
				}
			}
		</script>
		<style>
			body {
				background-color: #000;
			}

			#texts {
				color: #00ffe1;
				animation: textLight 1s ease-in-out infinite alternate;
			}

			@keyframes textLight {
				0% {
					text-shadow: 3px 3px 6px #5d00ff;
				}

				100% {
					text-shadow: 3px 3px 6px #f0fb00;
				}
			}

			@-moz-keyframes textLight {
				0% {
					text-shadow: 3px 3px 6px #5d00ff;
				}
				
				100% {
					text-shadow: 3px 3px 6px #f0fb00;
				}
			}

			@-ms-keyframes textLight {
				0% {
					text-shadow: 3px 3px 6px #5d00ff;
				}
				
				100% {
					text-shadow: 3px 3px 6px #f0fb00;
				}
			}

			@-webkit-keyframes textLight {
				0% {
					text-shadow: 3px 3px 6px #5d00ff;
				}
				
				100% {
					text-shadow: 3px 3px 6px #f0fb00;
				}
			}
		</style>
	</head>
	<body onload=type()>
		<div id="texts" style="font-size:24px;text-align:center;">
		</div>
	</body>
</html>