300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > html css文字标题特效 用CSS做一个流光溢彩的文字特效

html css文字标题特效 用CSS做一个流光溢彩的文字特效

时间:2020-06-07 13:38:11

相关推荐

html css文字标题特效 用CSS做一个流光溢彩的文字特效

前言

之前看到一个网站的文字特效,觉得很酷,

先看图:

我这个静态截图看不出滚动效果,也懒的截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制作的流光溢彩的文字效果咯。

酷不酷,学习一下。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。