技术栈

HTML动态彩虹字

CJH(本人账号)2024-02-21 13:35

效果:

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;
	}
}
上一篇:【Python】OpenCV-图像轮廓检测初学
下一篇:【c#实现用户连续按下指定按键后执行关闭窗口】
相关推荐
飞鸟malred
8 分钟前
vite+tailwind封装组件库
前端·react.js·npm
Angindem
9 分钟前
从零搭建uniapp项目
前端·vue.js·uni-app
java干货
16 分钟前
深度解析:Spring Boot 配置加载顺序、优先级与 bootstrap 上下文
前端·spring boot·bootstrap
Uyker
37 分钟前
微信小程序动态效果实战指南:从悬浮云朵到丝滑列表加载
前端·微信小程序·小程序
小小小小宇
1 小时前
前端按需引入总结
前端
小小小小宇
1 小时前
React 的 DOM diff笔记
前端
小小小小宇
1 小时前
react和vue DOM diff 简单对比
前端
我在北京coding
1 小时前
6套bootstrap后台管理界面源码
前端·bootstrap·html
Carlos_sam
2 小时前
Opnelayers:封装Popup
前端·javascript
热门推荐
01海康Visionmaster-常见问题排查方法-启动阶段02KGG转MP3工具|非KGM文件|解密音频03YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】04Coze扣子平台完整体验和实践(附国内和国际版对比)05从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑06【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高,一键全文降!文件格式不变,公式都保留的!07R-tree详解08DeepSeek各版本说明与优缺点分析09VMware虚拟机安装Win7专业版保姆级教程(附镜像包)10CCF CSP 认证考试历年真题满分题解(所有前四题)