在网页中，通常设计师们为了凸显自己的产品主题，总会让文字或者加点特效，比如使文字不停的闪动，或有规律的变色。以便达到吸引人关注的目的。那么除了用ps制作的gif动画外，还有哪些方法可以实现这样的功能特效呢？对于略懂代码的朋友们来说，我们都知道css中文字体样式是有很多种的，例如倾斜、加粗等等。那么这里就给大家介绍一下，如何用css代码做出文字闪动效果，本篇有两种闪动方式可供大家参考。
一、css字体闪动（波浪闪动）具体示例代码如下：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>纯css代码测试文字闪动效果</title> <style> body{ background: #000; } h1.fb-glitch { position: relative; color: #abff79; } h1.fb-glitch:before { left: -2px; text-shadow: 2px 0 #0b391a; animation: glitch-anim-2 3s infinite linear alternate-reverse; } h1.fb-glitch:before, h1.fb-glitch:after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; clip: rect(0, 0, 0, 0); } h1.fb-glitch:after { left: 2px; text-shadow: -1px 0 #1b5c16; animation: glitch-anim-1 2s infinite linear alternate-reverse; } @keyframes glitch-anim-1 { 0% { clip: rect(82px, 820px, 98px, 0); } 5.8823529412% { clip: rect(17px, 820px, 4px, 0); } 11.7647058824% { clip: rect(24px, 820px, 44px, 0); } 17.6470588235% { clip: rect(24px, 820px, 111px, 0); } 23.5294117647% { clip: rect(29px, 820px, 45px, 0); } 29.4117647059% { clip: rect(114px, 820px, 115px, 0); } 35.2941176471% { clip: rect(103px, 820px, 22px, 0); } 41.1764705882% { clip: rect(49px, 820px, 32px, 0); } 47.0588235294% { clip: rect(2px, 820px, 10px, 0); } 52.9411764706% { clip: rect(80px, 820px, 44px, 0); } 58.8235294118% { clip: rect(70px, 820px, 30px, 0); } 64.7058823529% { clip: rect(27px, 820px, 79px, 0); } 70.5882352941% { clip: rect(82px, 820px, 112px, 0); } 76.4705882353% { clip: rect(27px, 820px, 2px, 0); } 82.3529411765% { clip: rect(47px, 820px, 104px, 0); } 88.2352941176% { clip: rect(53px, 820px, 102px, 0); } 94.1176470588% { clip: rect(2px, 820px, 90px, 0); } 100% { clip: rect(88px, 820px, 56px, 0); } } @keyframes glitch-anim-2 { 0% { clip: rect(88px, 820px, 68px, 0); } 5.8823529412% { clip: rect(75px, 820px, 113px, 0); } 11.7647058824% { clip: rect(80px, 820px, 40px, 0); } 17.6470588235% { clip: rect(70px, 820px, 51px, 0); } 23.5294117647% { clip: rect(47px, 820px, 78px, 0); } 29.4117647059% { clip: rect(61px, 820px, 7px, 0); } 35.2941176471% { clip: rect(94px, 820px, 1px, 0); } 41.1764705882% { clip: rect(26px, 820px, 69px, 0); } 47.0588235294% { clip: rect(91px, 820px, 62px, 0); } 52.9411764706% { clip: rect(8px, 820px, 78px, 0); } 58.8235294118% { clip: rect(17px, 820px, 97px, 0); } 64.7058823529% { clip: rect(66px, 820px, 48px, 0); } 70.5882352941% { clip: rect(66px, 820px, 85px, 0); } 76.4705882353% { clip: rect(46px, 820px, 12px, 0); } 82.3529411765% { clip: rect(69px, 820px, 68px, 0); } 88.2352941176% { clip: rect(38px, 820px, 7px, 0); } 94.1176470588% { clip: rect(83px, 820px, 32px, 0); } 100% { clip: rect(110px, 820px, 95px, 0); } } </style></head><body><h1 class="fb-glitch" data-text="文字闪动效果">文字闪动效果</h1></body></html>以上代码可直接复制在本地测试，测试效果如下截图：
二、css字体闪动（渐变闪动）具体示例代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css代码闪动效果测试</title></head><body><div class="main"> 文字闪动测试：<span class="blink">文字闪动效果</span></div><style type="text/css"> .main{ color: #666;margin-top: 50px; } @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{ color: #dd4814; 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></body></html>以上代码可直接复制在本地测试，测试效果如下截图：
注：第二种渐变方法主要思路是通过改变透明度来实现文字的渐变闪烁
@keyframes blink{} 定义keyframe动画，命名为blink 。
@-webkit-keyframes blink 添加兼容性前缀
.blink{}定义blink类
-webkit-animation:;-moz-animation: ;-ms-animation: -o-animation: ; 其它浏览器兼容性前缀
本篇文章介绍了两种文字闪动特效方法，希望对有需要的朋友有所帮助。
教程内容到此结束，欢迎您再次访问http://www.VeVb.com，我们致力于提供丰富的web开发教程及资源。新闻热点
疑难解答
