css3实现动态流光文字效果
2017-10-19 本文已影响520人
辣瓜瓜
前一段看alloyteam的官网，发现了这个文字效果，看了看代码用css3实现的，赶紧学习了一下，效果如下：
效果.gif
让文字颜色是渐变的效果使用的是下面几个属性：
background-image：使用其设置文字背景色，一般设为渐变色。
text-fill-color：检索或设置对象中的文字填充颜色，一般设置为transparent，这样文字的颜色视觉上就是一开始设置的背景色。
background-clip：以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。
background-size：设置背景尺寸
animationdion：使背景色动起来
全部代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
@-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;
}
</style>
</head>
<body>
<p>腾讯前端大会</p>
</body>
</html>
