流光5 0

android流光字体实现,CSS实现字体流光⾼光滑动

这是个字体流光效果

.maskedh4{

display:block;

width:600px;

height:100px;

/*渐变背景*/

background-image:-webkit-linear-gradient(left,#3498db,#f4792010%,#d7134520%,#f7acbc30%,

#ffd40040%,#3498db50%,#f4792060%,#d7134570%,#f7acbc80%,#ffd40090%,#3498db);

color:transparent;/*⽂字填充⾊为透明*/

-webkit-text-fill-color:transparent;

-webkit-background-clip:text;/*背景剪裁为⽂字，只将⽂字显⽰为背景*/

background-size:200%100%;/*背景图⽚向⽔平⽅向扩⼤⼀倍，这样background-position才有移动与变化的空间*/

/*动画*/

animation:masked-animation4sinfinitelinear;

}

@keyframesmasked-animation{

0%{

background-position:00;/*background-position属性设置背景图像的起始位置。*/

}

100%{

background-position:-100%0;

}

}