HTML动态彩虹字

效果:

HTML:

html 复制代码
<div class="this-div">Elegant and Beautiful</div>

CSS:

css 复制代码
.this-div{
	background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation:  maskedAnimation 4s infinite linear;
    font-size: 18px;
}
 
@keyframes maskedAnimation {
	0% {
    background-position: 0 0;
	}
	100% {
	    background-position: -100% 0;
	}
}
相关推荐
_一条咸鱼_1 小时前
Vue 配置模块深度剖析(十一)
前端·javascript·面试
yechaoa2 小时前
Widget开发实践指南
android·前端
前端切图仔0012 小时前
WebSocket 技术详解
前端·网络·websocket·网络协议
JarvanMo3 小时前
关于Flutter架构的小小探讨
前端·flutter
前端开发张小七3 小时前
每日一练:4.有效的括号
前端·python
顾林海3 小时前
Flutter 图标和按钮组件
android·开发语言·前端·flutter·面试
雯0609~4 小时前
js:循环查询数组对象中的某一项的值是否为空
开发语言·前端·javascript
bingbingyihao4 小时前
个人博客系统
前端·javascript·vue.js
尘寰ya4 小时前
前端面试-HTML5与CSS3
前端·面试·css3·html5
最新信息4 小时前
PHP与HTML配合搭建网站指南
前端