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;-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> </html>
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>
感谢博客：/art_people/article/details/104768666/
