七彩文字滚动代码

演示图:

代码如下:

    <style>

        body {

            margin: 0;

            overflow: hidden;

            background: #000; /* 背景颜色 */

        }

        .scrolling-text {

            position: absolute;

            top: 0;

            white-space: nowrap;

            font-size: 2rem;

            color: #ffffff;

            animation: scroll-left 10s linear infinite;

            background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);

            background-size: 700% 700%;

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            animation: scroll-left 10s linear infinite, gradient 10s ease infinite;

        }

        @keyframes scroll-left {

            0% { transform: translateX(100%); }

            100% { transform: translateX(-100%); }

        }

        @keyframes gradient {

            0% { background-position: 0% 0%; }

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

        }

    </style>

    <div class="scrolling-text">这是一段七彩滚动文字效果</div>

下面是运行代码框