css 发光字 动效

CSS 发光字动效可以使您的网页看起来更加动感与有趣。这种效果可以使用 text-shadow 和 animation 属性来实现。

    .shine-text {
            text-shadow: 0 0 30px #fff, 0 0 60px #fff, 0 0 90px #fff, 0 0 120px #ff7d47, 0 0 150px #ff7d47, 0 0 180px #ff7d47, 0 0 210px #ff7d47, 0 0 240px #ff7d47;
            animation: shine 2s ease-in-out infinite;
    }
    @keyframes shine {
        0% {
                text-shadow: 0 0 30px #fff, 0 0 60px #fff, 0 0 90px #fff, 0 0 120px #ff7d47, 0 0 150px #ff7d47, 0 0 180px #ff7d47, 0 0 210px #ff7d47, 0 0 240px #ff7d47;
        }
        50% {
                text-shadow: none;
        }
        100% {
                text-shadow: 0 0 30px #fff, 0 0 60px #fff, 0 0 90px #fff, 0 0 120px #ff7d47, 0 0 150px #ff7d47, 0 0 180px #ff7d47, 0 0 210px #ff7d47, 0 0 240px #ff7d47;
        }
    }
    

在上面的代码中，我们定义了 shine-text 类，它使用了 text-shadow 属性为字体添加了投影效果。我们在 text-shadow 属性中定义了多个不同大小和颜色的投影。这些投影会创建一个类似光晕的效果。接着，我们使用了 animation 属性将 shine 动画应用到这个类上。animation 属性中的参数如下：

• shine：动画名称
• 2s：动画时间为2秒
• ease-in-out：动画缓动效果为先加速后减速
• infinite：动画无限循环

最后，我们定义了 shine 这个动画。在这个动画中，我们通过改变 text-shadow 属性来制作发光的效果。该动画分为三个关键帧：

• 0%：在动画开始时，投影效果是一组亮白色光晕。
• 50%：在动画的一半，投影效果会被设置为不可见，使得字体不发光。
• 100%：在动画结束时，投影效果又变成了一组亮白色光晕，刚好与动画开始时相同。

这样，我们就完成了一个 CSS 发光字动效的实现。您可以通过修改 text-shadow 属性或者动画的 Keyframes 来获得不同的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！