前言
之前看到一个网站的文字特效,觉得很酷,
先看图:
我这个静态截图看不出滚动效果,也懒的截GIF啦。
我们动手来实现一下效果。
实现代码html>
CMS建站爱好者交流平台body{ background: #222;}
*{margin: 0;padding: 0;}
._borderWrap{
width: 580px;
height: 150px;
position: absolute;
left: 23%;
top: 25%;
}
._border{
line-height: 145px;
text-align: center;
font-size: 40px;
font-weight: bolder;
-webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(left,#129835,#ece648 25%,#129835 50%,#F9E92B 75%,rgb(40, 150, 38));
background-size: 200%,100%;
-webkit-background-clip: text;
-webkit-animation: word 0.5s linear infinite ;
}
@keyframes word {
0%{background-position: 0 0}
100%{background-position: -100% 0}
}
将上面的代码复制,然后保存在记事本中,将扩展名修改为.html,使用浏览器打开即可看到CSS制作的流光溢彩的文字效果咯。
酷不酷,学习一下。