文字动态颜色变化效果

最新推荐文章于 2022-05-25 14:47:57 发布

weixin_30456039

最新推荐文章于 2022-05-25 14:47:57 发布

阅读量412

点赞数

CC 4.0 BY-SA版权

文章标签： c#

原文链接：http://www.cnblogs.com/wxhhts/p/11551605.html

本文介绍了一种使用CSS实现的渐变文字动画效果，通过linear-gradient和animation属性结合，可以为网页上的文本添加生动的色彩变化动画。该效果利用了背景图像的渐变填充和文本颜色的透明设置，使得文本在不同颜色间平滑过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

被你发现了，哈哈哈。这是一个有趣的小Demo哇。

鼠标左键键扫描选中上面区域查看效果

.gradient-text {
    background-image: linear-gradient(90deg, $red, $orange);
    background-clip: text;
    line-height: 60px;
    font-size: 60px;
    animation: hue 5s linear infinite;
    -webkit-text-fill-color: transparent;
}
@keyframes hue {
    from {
        filter: hue-rotate(0);
    }
    to {
        filter: hue-rotate(-1turn);
    }
}


<div class="bruce flex-ct-x">
    <h1 class="gradient-text">Full Stack Developer</h1>
</div>