文字彩虹效果（文字跑马灯）

 

HTML：

HTML
<text class="title">我是彩虹跑马灯</text>

CSS：

CSS:

.title {
        color: transparent;
        background: -webkit-linear-gradient(30deg, #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: auto;
        animation: gradientText 300s infinite linear;
        -webkit-animation: gradientText 300s infinite linear;
        text-align: center;
        font-size: 40rpx;
        margin-top: 100rpx;
        font-weight: bolder;

        top: 200rpx;
    }

    @keyframes gradientText {
        0% {
            background-position: 0;
        }

        100% {
            background-position: 24000px;
        }
    }