CSS3荧光灯文字闪烁动画特效
这是一款纯CSS3荧光灯文字闪烁动画特效。该特效在HTML结构中将文字拆分为单个span元素，然后通过CSS3代码来制作荧光灯和闪烁特效。html代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS3荧光灯文字闪烁动画特效</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" />
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<style type="text/css">
.demo{padding:2em 0; background: #2c2c54; }
.text-effect{
color: #fff;
font-family: 'Monoton', cursive;
font-size: 100px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
margin: 0 auto;
display: block;
position: relative;
font-family: 微软雅黑
}
.text-effect span{ animation: animate linear 2000ms infinite; }
.text-effect span:nth-child(1n){ animation-delay: 0s; }
.text-effect span:nth-child(2n){ animation-delay: 100ms; }
.text-effect span:nth-child(3n){ animation-delay: 200ms; }
.text-effect span:nth-child(4n){ animation-delay: 300ms; }
.text-effect span:nth-child(5n){ animation-delay: 400ms; }
.text-effect span:nth-child(6n){ animation-delay: 500ms; }
.text-effect span:nth-child(7n){ animation-delay: 600ms; }
.text-effect span:nth-child(8n){ animation-delay: 700ms; }
.text-effect span:nth-child(9n){ animation-delay: 800ms; }
.text-effect span:nth-child(10n){ animation-delay: 900ms; }
@keyframes animate{
0%{ opacity: 0.3; }
100%{
opacity:1;
text-shadow: 0 0 80px Red,0 0 30px orange,0 0 6px DarkRed;
}
}
@media only screen and (max-width: 990px){
.text-effect{ font-size: 65px; }
}
@media only screen and (max-width: 767px){
.text-effect{ font-size: 50px; }
}
@media only screen and (max-width: 479px){
.text-effect{ font-size: 36px; }
}
@media only screen and (max-width: 359px){
.text-effect{ font-size: 27px; }
}
</style>
</head>
<body>
<div class="htmleaf-container">
<div class="demo" style="min-height:350px;">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-effect">
<span>C</span>
<span>O</span>
<span>D</span>
<span>E</span>
<span>代</span>
<span>码</span>
<span>之</span>
<span>家</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>http://www.htmleaf.com/css3/css3donghua/201908025756.html
页:
[1]