本文主要是介绍【css3特效】文字颜色渐变流光效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
效果图
代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>流光</title><style>/* 加上 -webkit- 注意兼容 */h1 {background: -webkit-linear-gradient(135deg,#0eaf6d,#ff6ac6 25%,#147b96 50%,#e6d205 55%,#2cc4e0 60%,#8b2ce0 80%,#ff6384 95%,#08dfb4);/* 文字颜色填充设置为透明 */-webkit-text-fill-color: transparent;/* 背景裁剪，即让文字使用背景色 */-webkit-background-clip: text;/* 背景图放大一下，看着柔和一些 */-webkit-background-size: 200% 100%;/* 应用动画flowCss 12秒速度 无限循环 线性匀速动画*/-webkit-animation: flowCss 12s infinite linear;}@-webkit-keyframes flowCss {0% {/* 移动背景位置 */background-position: 0 0;}100% {background-position: -400% 0;}}h1:hover {-webkit-animation: flowCss 4s infinite linear;}</style>
</head><body><h1>文字颜色渐变流光效果</h1><!-- 思路就是 文字颜色填充为透明、背景裁剪让文字使用背景色、然后设置一个渐变背景色再放大一下背景，最后通过动画移动背景位置，于是效果就出来了 -->
</body></html>这篇关于【css3特效】文字颜色渐变流光效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
