一、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: ; 其它瀏覽器安全色性首碼
本篇文章介紹了兩種文字閃動特效方法，希望對有需要的朋友有所協助。
【相關內容推薦】
利用html實現文字閃爍的效果代碼
炫酷文字跳動漂浮js特效代碼
CSS3實現立體文字動態文字特效
一個網頁標題title的閃動提示效果實現思路_javascript技巧
利用純CSS實現動態文字效果執行個體
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
