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 小时前
【无标题】
java·前端
IT_陈寒1 小时前
SpringBoot自动配置把我都整不会了
前端·人工智能·后端
最逗前端小白鼠2 小时前
vue3 数据响应式遇到的问题
前端·vue.js
倚栏听风雨3 小时前
ts中 ?? 和 || 区别
前端
冴羽3 小时前
请愿书:Node.js 核心代码不应该包含 AI 代码!
前端·javascript·node.js
我家猫叫佩奇3 小时前
一款灵感源自《集合啦!动物森友会》的 UI 组件库
前端
mmmmm123423 小时前
深入 DOM 查询底层:HTMLCollection 动态原理与 querySelectorAll 静态快照解析
前端·javascript
weixin199701080163 小时前
《TikTok 商品详情页前端性能优化实战》
前端·性能优化
闲坐含香咀翠3 小时前
告别二次登录!Web端检测并唤起Electron客户端实战
前端·客户端
岁月宁静3 小时前
都知道AI大模型能生成文本内容,那你知道大模型是怎样生成文本的吗?
前端·vue.js·人工智能