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;
	}
}
相关推荐
蜡台10 分钟前
修改Uniapp input 组件不刷新视图问题
前端·uni-app·input
逸铭14 分钟前
Day 8:Preload 是什么?——在别人的网页里打黑工还要合规
前端·客户端
柒和远方22 分钟前
Worker Readiness:为什么 `/health` 不能证明后台任务能跑
前端·后端·架构
吃糖的小孩23 分钟前
Web Owner Console 还没写前端,我先给它设计 read model
前端
析数塔24 分钟前
2026前端框架深度解析:React Compiler、Angular Zoneless、Vue 3.5重写游戏规则
前端·vue.js·react.js
嘟嘟071725 分钟前
Node.js spawn 实现迷你 Cursor 自动化终端|子进程完整解析
前端·后端·面试
程序员Agions26 分钟前
ES2026,早该这样了
前端·javascript
ONE_SIX_MIX27 分钟前
lightweight-charts-onesixth v2.8.1 → v3.1.1 更新总览
java·前端·python
恋猫de小郭27 分钟前
Flutter material/cupertino 解耦最新进展,已经在做新样式了
android·前端·flutter
weedsfly28 分钟前
纯函数与副作用——前端开发中最容易被忽视的质量保证
前端·javascript·面试