今天給大家分享幾個文字閃爍特效代碼，純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 文字閃爍特效代碼全部內容，更多源碼分享請關注碼云筆記。
