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;
	}
}
相关推荐
jacklood35 分钟前
使用STM32的迪文屏控制使用参考方式
前端·javascript·stm32
KevinCyao43 分钟前
Go短信营销接口示例代码:Golang高并发调用营销短信接口的实现方案与代码分享
android·前端·网络·golang·前端框架
Moyo2031 小时前
前端 -- react快速入门
前端·react.js·前端框架
whuhewei1 小时前
在React中实现CSS动画的回放
前端·css·react.js
北海军1 小时前
render el-select下拉框
前端·javascript·vue.js
We་ct1 小时前
LeetCode 4. 寻找两个正序数组的中位数:二分优化思路详解
前端·数据结构·算法·leetcode·typescript·二分
H@Z*rTE|i1 小时前
vue首屏加载优化
前端·javascript·vue.js
FreeBuf_1 小时前
新型开源供应链攻击:虚假 npm 安装日志暗藏 RAT 木马
前端·npm·开源
Irene19911 小时前
v-model 的本质,defineModel() 是 Vue 3.4 的重大改进
前端·javascript·html5
EF@蛐蛐堂2 小时前
【vue】Vite 生态 5 个 “新玩具“
前端·javascript·vue.js