字体出现闪烁效果html,CSS3实现文字闪烁效果的多种形式代码
文字闪烁效果一
通过改变透明度来实现文字的渐变闪烁，代码如下：
文字闪烁：闪烁效果
如果不需要渐变闪烁效果，我们可以在keyframe动画中定义50%，50.1%的opacity的值。如下：@-webkit-keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
100% { opacity: 0; }
}
文字闪烁效果二
通过设置text-shadow的值，来实现文字阴影闪烁的效果，代码如下：
文字闪烁效果三
利用背景图片或者背景渐变，实现文字颜色的闪烁效果，代码如下：闪烁效果
.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;
}
}