前言
之前看到一个网站的文字特效,觉得很酷,
先看图:
我这个静态截图看不出滚动效果,也懒的截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,#ece64825%,#12983550%,#F9E92B75%,rgb(40,150,38));
background-size:200%,100%;
-webkit-background-clip:text;
-webkit-animation:word0.5slinearinfinite;
}
@keyframesword{
0%{background-position:00}
100%{background-position:-100%0}
}
CMS建站爱好者交流平台
将上面的代码复制,然后保存在记事本中,将扩展名修改为.html,使用浏览器打开即可看到CSS制作的流光溢彩的文字效果咯。
酷不酷,学习一下。