css3 實(shí)現(xiàn)文字閃爍效果的三種方式示例代碼
發(fā)布時(shí)間:2021-04-25 17:02:20 作者:冉冉勝起
我要評(píng)論

這篇文章主要介紹了css3 實(shí)現(xiàn)文字閃爍效果的三種方式示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
1.通過(guò)改變透明度來(lái)實(shí)現(xiàn)文字的漸變閃爍,效果圖:
<!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動(dòng)畫(huà),命名為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類(lèi)*/ .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動(dòng)畫(huà)中定義50%,50.1%的opacity的值。如下:
@-webkit-keyframes blink { 0% { opacity: 1; } 50% { opacity: 1; } 50.01% { opacity: 0; } 100% { opacity: 0; } }
2.利用背景圖片或者背景漸變,實(shí)現(xiàn)文字顏色的閃爍效果,效果圖:
<!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.通過(guò)設(shè)置text-shadow的值,來(lái)實(shí)現(xiàn)文字陰影閃爍的效果,效果圖:
<!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>
感謝博客:https://blog.csdn.net/art_people/article/details/104768666/
到此這篇關(guān)于css3 實(shí)現(xiàn)文字閃爍效果的三種方式示例代碼的文章就介紹到這了,更多相關(guān)css3文字閃爍內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
CSS3實(shí)現(xiàn)閃爍動(dòng)畫(huà)效果的方法
這篇文章主要為大家介紹了CSS3實(shí)現(xiàn)閃爍動(dòng)畫(huà)效果的方法,可實(shí)現(xiàn)屬性名為className的元素呈現(xiàn)閃爍效果的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-09使用CSS3實(shí)現(xiàn)按鈕懸停閃爍動(dòng)態(tài)特效代碼
這篇文章主要介紹了使用CSS3實(shí)現(xiàn)按鈕懸停閃爍動(dòng)態(tài)特效,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-08-25