html字体闪烁效果,css3实现字体闪动效果

​

style:

.colorText{background-image:

-webkit-linear-gradient(left, #F30, #CC3 25%, #FC0 50%, #f00 75%,

#000);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

-webkit-background-size:200%

100%;

font-size:10em;

-webkit-animation: bling 3s infinite

linear;

font-weight:bold;}

@keyframes

bling{

0%{

background-position:0 0;}

100%{

background-position:-100% 0;}

}

​文字闪动的效果记得最初在flash里面做过，当时实现的原理就是将文字转化为遮罩层，其实css实现的也是这个原理，这里用到的css3，我们设置文字的颜色为透明-webkit-text-fill-color:transparent;

将背景色设置为只显示文字那块地-webkit-background-clip:text;

，再为背景设置一个animation的动画，即可实现此效果，其实，不做动画效果他就是渐变字体了。

关于background-clip还有其他值，有机会再分享其他效果吧。