html文字效果简书,css3实现动态流光文字效果

前一段看alloyteam的官网，发现了这个文字效果，看了看代码用css3实现的，赶紧学习了一下，效果如下：

效果.gif

让文字颜色是渐变的效果使用的是下面几个属性：

background-image：使用其设置文字背景色，一般设为渐变色。

text-fill-color：检索或设置对象中的文字填充颜色，一般设置为transparent，这样文字的颜色视觉上就是一开始设置的背景色。

background-clip：以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。

background-size：设置背景尺寸

animationdion：使背景色动起来

全部代码如下：

@-webkit-keyframes masked-animation {

0% {

background-position: 0 0

}

to {

background-position: -100% 0

}

}

p {

margin: 200px auto;

width: 400px;

height: 100px;

line-height: 100px;

text-align: center;

color: hsla(0, 0%, 100%, .65);

font-weight: 800;

font-size: 52px;

background-image: -webkit-linear-gradient(left, #cddc39, #ff9800 25%, #cddc39 50%, #ff9800 75%, #cddc39);

-webkit-text-fill-color: transparent;

-webkit-background-clip: text;

-webkit-background-size: 200% 100%;

-webkit-animation: masked-animation 2s infinite linear;

}

p:hover {

-webkit-animation: masked-animation 0.5s infinite linear;

}

腾讯前端大会