css写特效电灯字

最新推荐文章于 2023-12-07 18:04:27 发布

知否灬知否

最新推荐文章于 2023-12-07 18:04:27 发布

阅读量322

点赞数 2

分类专栏： css 文章标签： css3 html

本文链接：https://blog.youkuaiyun.com/weixin_51958206/article/details/109350773

版权

css 专栏收录该内容

3 篇文章

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>电灯泡文字</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			body {
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
				font-family: sans-serif;
				background: #000000;
			}

			h2 {
				font-size: 6em;
				color: #333;
				font-weight: 500;
				
			}

			h2 span {
				animation: animate 1s linear infinite;
			}
			h2 span:nth-child(1){
				animation-delay: 0.2s;
			}
			h2 span:nth-child(2){
				animation-delay: 0.4s;
				
			}
			h2 span:nth-child(3){
				animation-delay: 0.6s;
				
			}
			h2 span:nth-child(4){
				animation-delay: 0.8s;
				
			}

			@keyframes animate {

				0%,
				80% {
					color: #333;
					text-shadow: none;
				}

				100% {
					color: #FFFFFF;
					text-shadow: 0 0 10px #FFFFFF,
						0 0 20px #FFFFFF,
						0 0 40px #FFFFFF,
						0 0 80px #FFFFFF,
						0 0 120px #FFFFFF,
						0 0 160px #FFFFFF;
				}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<h2>
				<span>I</span>
				<span>O</span>
				<span>V</span>
				<span>E</span>
			</h2>
			
		</div>
		
	</body>
</html>