不知道哪个时候记得的这首小诗，只觉得那时候以为自己会永远年轻，永远热泪盈眶，明天永远会更好，不管遇到什么，未来永远值得期待……，那真是美好的时代。

用渐变结合无缝滚动动画，做了一个小案例，很早以前做的，终于被翻出来。

点击图片看看吧。

知识点：

1、渐变

2、无缝运动的原理

3、animation动画

核心代码：

        .wrapper{
            position: relative;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background: url(images/bg-container.png) repeat-x;
        }
        .sky{
            position: absolute;
            left: 0;
            top: 0;
            width: 200%;
            height: 100vh;
            background: url(images/bg-space.png) repeat-x;
            animation:move 30s linear infinite;
        }
        .mountains{
            position: absolute;
            width: 100vw;
            height: 15vw;
            left: 0;
            bottom: 0;
            /* background-color: #eee; */
        }
        .mountain{
            position: absolute;
            left: 0;
            bottom: 0;
            width: 200%;
            height: 100%;
        }
        .mountain0{
            background: url(images/bg-mountain-3.png) repeat-x left bottom / 50% auto;  
            animation:move 20s linear infinite;
        }
        .mountain1{
            background: url(images/bg-mountain-2.png) repeat-x left bottom / 50% auto;  
            animation:move 15s linear infinite;
        }
        .mountain2{
            background: url(images/bg-mountain-1.png) repeat-x left bottom / 50% auto;  
            animation:move 10s linear infinite;
        }
        .content{
            position: absolute;
            width: max-content;
            text-align: center;
            left: 0;
            right: 0;
            top: 100px;
            margin: auto;
            background:linear-gradient(#ff5480,#ff54f5,#4739ff,#ff5480,#ff54f5,#4739ff,#ff5480) 0 0 / auto 200%;
            animation: vmove 5s linear infinite;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        @keyframes move {
            to{
                transform: translateX(-50%);
            }
        }
        @keyframes vmove {
            to{
                background-position: 0 -100%;
            }
        }