1.设计html
<div id="font" > <p>欢迎参加百度前端技术学院</p> <p>点击报名</p> </div>
2.p元素中字体为流光字体,所以为div设置背景色,为p设置字体颜色为transparent
#font{ width: 400px; height: 400px; padding-top: 100px; margin: 0 auto; background-color: black; } #font p{ text-align: center; background-image: -webkit-linear-gradient(left, blue, red 25%, blue 50%, red 75%, blue 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; animation: stream 3s infinite linear; background-size: 200% 100%; }
@keyframes stream {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
3.为p设置颜色流动的背景
background-color表示的区域从border左上角到右下角,background-image表示的区域从padding左上角到border右下角,所以产生了 background-clip
background-clip通常用来设置背景裁剪区域,而webkit下background-clip还有一个更神奇的效果,就是可以让图片填充文本,那就是background-clip:text配合其私有属性-webkit-text-fill-color: transparent,把图片设置成流动的颜色就成流光字体啦
-webkit-linear-gradient(left, blue, red 25%, blue 50%, red 75%, blue 100%);首个参数接受渐变的角度,可为top\bottom\left\right\10deg,后面紧跟颜色,添加占比
背景图片Width为200%,动画每3s执行完一次,不停地执行,匀速