效果展示:
实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这个文字特效很酷啊</title>
<style>
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}
}
</style>
</head>
<body>
<div>
<div>这个文字特效很酷啊</div>
</div>
</body>
</html>
将上面的代码复制,然后保存在记事本中,将扩展名修改为.html,使用浏览器打开即可看到CSS制作的流光溢彩的文字效果咯。
1、文章版权归作者所有,未经允许请勿转载。
2、本站所有文章,如无特殊说明或标注,均为本站原创发布。任何在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们邮箱:526009505@qq.com进行处理。
3、咨询请联系QQ:526009505
2、本站所有文章,如无特殊说明或标注,均为本站原创发布。任何在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们邮箱:526009505@qq.com进行处理。
3、咨询请联系QQ:526009505
你可能也喜欢
- ♥ 网站如何提高页面打开加载速度?04/25
- ♥ 百度蜘蛛抓取服务器目录和网页的区别06/28
- ♥ seo网站优化设计策划书主要体现在哪些方面呢?01/10
- ♥ 如何建设一个企业网站方案策划呢?08/07
- ♥ 企业搭建网站的步骤是什么?10/17
- ♥ 网站底部添加网站运行时间代码的教程05/08