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;
	}
}
相关推荐
JavaGuide几秒前
我用 Claude Code/ZCode+GLM-5.3 从零做了一款 Agent 游戏!
前端·后端
Eason_Lou5 分钟前
vue flow使用注意事项
前端·vue.js
小赵同学WoW1 小时前
1-2 TypeScript 中的 `any` 与 `unknown`
前端
six_1 小时前
C# 上位机(持续更新中)
前端·面试·c#
风雨_1 小时前
Git Worktree sourcetree完整使用指南
前端
半个落月1 小时前
React 组件通信进阶:useContext 与自定义 Hook 实战详解
前端·react.js
用户921080262862 小时前
ChatComposer 输入区改造:基于技能市场实现 Agent 输入框
前端
用户45989204565162 小时前
一套 KMP 多仓库版本治理工作流:用 Version Catalog + CI 把发版流水线自动化
前端·kotlin
小赵同学WoW2 小时前
1-4 TypeScript 中的 `number`、`bigint` 与 `string`
前端
小赵同学WoW2 小时前
1-3 `boolean` 与字面量类型
前端