超卓网
免费分享资源的网站

css实现流光文字美化代码

2020-10-10 来源：逸云日志分类：WordPress / 其他技巧 / 资源共享扫描二维码

效果如图：

使用方法：将下列代码复制到需要展示的网页

<b id="lgwz">超卓网（chaozhuowang.com），免费分享资源的网站</b>
<style>
/**流光文字**/
#lgwz{ font-size:15px; margin: 0; 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 2s infinite linear; } @keyframes masked-animation { 0% { background-position: 0 0; } 100% { background-position: -100%, 0; } }
</style>

点我尝试代码在线演示

未经超卓网允许不得转载：超卓网 » css实现流光文字美化代码

标签：CSS 发光字体美化

以上文章内容包括但不限于（文字、图片、软件、程序等）部分来自网络搜集并进行整理，本网站提供的内容仅用于个人学习、研究使用，我们不能保证内容的正确性与完整性。通过使用本站内容随之而来的风险与本站无关，访问者可将本网站提供的内容或服务用于个人学习、研究等，以及其他非商业性或非盈利性用途，但同时应遵守著作权法及其他相关法律的规定，不得侵犯本网站及相关权利人的合法权利。