css3实现⽂字闪烁效果的三种⽅式1.通过改变透明度来实现⽂字的渐变闪烁，效果图：
<!DOCTYPE html>
<html>
<head>
</head>
<title>⽂字闪烁</title>
<body>
<div class="blink">
星星之⽕可以燎原
</div>
</body>
<style>
.myclass{
letter-spacing:5px;/*字间距*/
color: red;
font-weight:bold;
font-size:46px;
}
/* 定义keyframe动画，命名为blink */
@keyframes blink{
0%{opacity: 1;}
100%{opacity: 0;}
}
/* 添加兼容性前缀 */
@-webkit-keyframes blink {
0% { opacity: 1; }
100% { opacity: 0; }
}
@-moz-keyframes blink {
0% { opacity: 1; }
100% { opacity: 0; }
}
@-ms-keyframes blink {
0% {opacity: 1; }
100% { opacity: 0;}
}
@-o-keyframes blink {
0% { opacity: 1; }
100% { opacity: 0; }
}
/* 定义blink类*/
.blink{
color: red;
font-size:46px;
animation: blink 1s linear infinite;
/* 其它浏览器兼容性前缀 */
-webkit-animation: blink 1s linear infinite;
-moz-animation: blink 1s linear infinite;
-ms-animation: blink 1s linear infinite;
-o-animation: blink 1s linear infinite;
}
<style>
</html>
如果不需要渐变闪烁效果，我们可以在keyframe动画中定义50%，50.1%的opacity的值。如下：
@-webkit-keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
100% { opacity: 0; }
}
2.利⽤背景图⽚或者背景渐变，实现⽂字颜⾊的闪烁效果，效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.blink{
display: inline-block;
font-size: 46px;
margin: 10px;
background: linear-gradient(left, #f71605, #e0f513);
background: -webkit-linear-gradient(left, #f71605, #e0f513);
background: -o-linear-gradient(right, #f71605, #e0f513);
-
webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation:scratchy 0.253s linear forwards infinite;
/* 其它浏览器兼容性前缀 */
-webkit-animation:scratchy 0.253s linear forwards infinite;
-moz-animation: scratchy 0.253s linear forwards infinite;
-ms-animation: scratchy 0.253s linear forwards infinite;css变量
-o-animation: scratchy 0.253s linear forwards infinite;
}
@keyframes  scratchy {
0% {
background-position: 0 0;
}
25% {
background-position: 0 0;
}
26% {
background-position: 20px -20px;
}
50% {
background-position: 20px -20px;
}
51% {
background-position: 40px -40px;
}
75% {
background-position: 40px -40px;
}
76% {
background-position: 60px -60px;
99% {
background-position: 60px -60px;  }
100% {
background-position: 0 0;
}
}
/* 添加兼容性前缀 */
@-webkit-keyframes scratchy {
0% {
background-position: 0 0;
}
25% {
background-position: 0 0;
}
26% {
background-position: 20px -20px;  }
50% {
background-position: 20px -20px;  }
51% {
background-position: 40px -40px;  }
75% {
background-position: 40px -40px;  }
76% {
background-position: 60px -60px;  }
99% {
background-position: 60px -60px;  }
100% {
background-position: 0 0;
}
}
@-moz-keyframes scratchy {
0% {
background-position: 0 0;
}
25% {
background-position: 0 0;
}
26% {
background-position: 20px -20px;  }
50% {
background-position: 20px -20px;  }
51% {
background-position: 40px -40px;  }
75% {
background-position: 40px -40px;  }
76% {
background-position: 60px -60px;  }
99% {
background-position: 60px -60px;  }
100% {
background-position: 0 0;
}
@-ms-keyframes scratchy {
0% {
background-position: 0 0;
}
25% {
background-position: 0 0;
}
26% {
background-position: 20px -20px;
}
50% {
background-position: 20px -20px;
}
51% {
background-position: 40px -40px;
}
75% {
background-position: 40px -40px;
}
76% {
background-position: 60px -60px;
}
99% {
background-position: 60px -60px;
}
100% {
background-position: 0 0;
}
}
@-o-keyframes scratchy {
0% {
background-position: 0 0;
}
25% {
background-position: 0 0;
}
26% {
background-position: 20px -20px;
}
50% {
background-position: 20px -20px;
}
51% {
background-position: 40px -40px;
}
75% {
background-position: 40px -40px;
}
76% {
background-position: 60px -60px;
}
99% {
background-position: 60px -60px;
}
100% {
background-position: 0 0;
}
}
</style>
</head>
<body>
<div class="blink">星星之⽕可以燎原</div>    </body>
3.通过设置text-shadow的值，来实现⽂字阴影闪烁的效果，效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.blink{
font-size: 46px;
color:#4cc134;
margin: 10px;
animation: changeshadow 1s  ease-in  infinite ;
/* 其它浏览器兼容性前缀 */
-webkit-animation: changeshadow 1s linear infinite;
-moz-animation: changeshadow 1s linear infinite;
-ms-animation: changeshadow 1s linear infinite;
-o-animation: changeshadow 1s linear infinite;
}
@keyframes changeshadow {
0%{ text-shadow: 0 0 4px #4cc134}
50%{ text-shadow: 0 0 40px #4cc134}
100%{ text-shadow: 0 0 4px #4cc134}
}
/* 添加兼容性前缀 */
@-webkit-keyframes changeshadow {
0%{ text-shadow: 0 0 4px #4cc134}
50%{ text-shadow: 0 0 40px #4cc134}
100%{ text-shadow: 0 0 4px #4cc134}
}
@-moz-keyframes changeshadow {
0%{ text-shadow: 0 0 4px #4cc134}
50%{ text-shadow: 0 0 40px #4cc134}
100%{ text-shadow: 0 0 4px #4cc134}
}
@-ms-keyframes changeshadow {
0%{ text-shadow: 0 0 4px #4cc134}
50%{ text-shadow: 0 0 40px #4cc134}
100%{ text-shadow: 0 0 4px #4cc134}
}
@-o-keyframes changeshadow {
0%{ text-shadow: 0 0 4px #4cc134}
50%{ text-shadow: 0 0 40px #4cc134}
100%{ text-shadow: 0 0 4px #4cc134}
}
</style>
</head>
<body>
<div class="blink">星星之⽕可以燎原</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。