[分享]css3文字流光效果

CSS3文字流光效果是一种非常炫酷的文本效果，它能够让文本闪烁、流动，像水面上的微光一样。这个效果利用了CSS3的渐变、动画和文字阴影等属性，让你的网站更加生动有趣、吸引眼球。.text { font...

CSS3文字流光效果是一种非常炫酷的文本效果，它能够让文本闪烁、流动，像水面上的微光一样。这个效果利用了CSS3的渐变、动画和文字阴影等属性，让你的网站更加生动有趣、吸引眼球。

.text {
    font-size: 100px;
    background-color: #000;
    background-image: linear-gradient(to right, #00c6ff 0%, #0072ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: flow 2s linear infinite;
}

@keyframes flow {
    0% {
        text-shadow: none;
    }
    20% {
        text-shadow: 0 0 20px #00c6ff, 0 0 60px #00c6ff, 0 0 80px #00c6ff, 0 0 100px #0072ff;
    }
    40% {
        text-shadow: none;
    }
    50% {
        text-shadow: 0 0 20px #00c6ff, 0 0 60px #00c6ff, 0 0 80px #00c6ff, 0 0 100px #0072ff;
    }
    60% {
        text-shadow: none;
    }
    80% {
        text-shadow: 0 0 20px #00c6ff, 0 0 60px #00c6ff, 0 0 80px #00c6ff, 0 0 100px #0072ff;
    }
    100% {
        text-shadow: none;
    }
} 

代码中我们先定义了一个文本框，然后使用了渐变和文字阴影属性，让文本呈现出流光效果。接着我们定义了一个动画，使文本的阴影效果能够在指定时间内实现流动和闪烁的效果。

使用流光效果的文本可以用于网站的标题、特色介绍等地方，能够吸引用户关注和提高美观度。不过需要注意的是，该效果需要较高的浏览器兼容性，建议在使用时多进行测试。