今天給大家分享幾個文字閃爍特效代碼，純css3代碼實現，對于新手小伙伴值得拿來學習一下。

文字閃爍特效一

通過改變透明度來實現文字的漸變閃爍，代碼如下：

文字閃爍：閃爍效果

.main{

color: #666;margin-top: 50px;

}

/* 定義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: #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;

}

文字帶漸變效果的閃爍如下：

如果不需要漸變閃爍效果，我們可以在keyframe動畫中定義50%，50.1%的opacity的值。如下：

@-webkit-keyframes blink {

0% { opacity: 1; }

50% { opacity: 1; }

50.01% { opacity: 0; }

100% { opacity: 0; }

}

這樣文字不漸變閃爍效果如下：

文字閃爍特效二

通過設置text-shadow的值，來實現文字陰影閃爍的效果，代碼如下：

閃爍效果

.box{

font-size: 20px;

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}

}

效果如下：

文字閃爍特效三

利用背景圖片或者背景漸變，實現文字顏色的閃爍效果，代碼如下：

閃爍效果

.box{

display: inline-block;

font-size: 20px;

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;

}

}

效果如下：

以上就是今天css3 文字閃爍特效代碼全部內容，更多源碼分享請關注碼云筆記。

總結

以上是生活随笔為你收集整理的html语言闪烁特效代码,css3 文字闪烁特效代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。