子比-七彩流光文字效果代码

子比-七彩流光文字效果代码-安鱼
子比-七彩流光文字效果代码
此内容为免费阅读,请登录后查看
G0
推荐激活会员,任意下载资源
链接失效或者无法下载可以私信联系站长
免费阅读

前言

前几天看一个人的网站这个七彩流光文字代码不错,我给他扒了一下,看着还不错,然后就自己留着用了!这个代码只需要CSS和HTML即可实现,直接上效果

效果展示:

子比-七彩流光文字效果代码-安鱼

CSS代码

/**七彩流光文字*/
#tf_lgz{background:-webkit-linear-gradient(left,#ffffff,#ff0000 6.25%,#ff7d00 12.5%,#ffff00 18.75%,#00ff00 25%,#00ffff 31.25%,#0000ff 37.5%,#ff00ff 43.75%,#ffff00 50%,#ff0000 56.25%,#ff7d00 62.5%,#ffff00 68.75%,#00ff00 75%,#00ffff 81.25%,#0000ff 87.5%,#ff00ff 93.75%,#ffff00 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 100%;animation:masked-animation 10s infinite linear}@keyframes masked-animation{0%{background-position:0 0}100%{background-position:-100%,0}}
/**七彩流光文字*/

上方代码中的 10s 为过渡时间控制,可自行设定过渡效果快/慢。

调用代码:

<p style="text-align:center" id="tf_lgz">这里为你需要显示的七彩流光文字内容</p>

 

温馨提示: 本文最后更新于2024-10-24 16:42:12,某些文章具有时效性,若有错误或已失效,请在下方 留言或联系 零染博客
© 版权声明
THE END
喜欢就支持一下吧
点赞8赞赏 分享
评论 共1条
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片快捷回复
    • 安鱼的头像-安鱼金牌会员安鱼等级-LV6-安鱼作者0