HTML+CSS 文字渐变色动画 流光溢彩字

示例

源码

<div class="RainBowText">流光溢彩字</div>

<style>
    @supports (-webkit-transform: scale(0)) {
        .RainBowText {
            background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, orange, red);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            -webkit-background-size: 200% 100%;
            animation: bgp 5s infinite linear;
            font-size: 50px;
        }
    }
    
    @keyframes bgp {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: -100% 0;
        }
    }
</style>

资料

方法改编自 Tempta36