Continuous horizontal scrolling effect of pictures realized by css

Today, I wrote a picture with css to scroll horizontally. The results are as follows:

A total of two graphs are used, one is the background graph, and the other is the scroll graph. The html structure is as follows:

 <div class="img-box"> <img src="background map address"> <div class="roll-img1"><img src="Scroll Picture Address"></div> <div class="roll-img2"><img src="Scroll Picture Address"></div> </div>

Then css

 /*Animation 1*/ @keyframes rollimg1 {     0% {         left: 0;     }     100% {         left: -100%;     } } /*Animation 1*/ @keyframes rollimg2 {     0% {         left: 100%;     }     100% {         left: 0;     } } /*Outermost layer*/ .img-box{     position: relative;     overflow: hidden; } /*Background*/ .img-box>img{     display: block;     position: relative;     line-height: 1;     width: 100%;     height: auto;     z-index: 1; } /*First scroll picture*/ .roll-img1{     position: absolute;     top: 0;     left: 0;     width: 100%;     height: 100%;     z-index: 2;     overflow: hidden;     animation: rollimg1 12s infinite linear;     display: flex;     align-items: center; } /*Pictures to scroll*/ .roll-img2{     position: absolute;     top: 0;     left: 100%;     width: 100%;     height: 100%;     z-index: 2;     overflow: hidden;     animation: rollimg2 12s infinite linear;     display: flex;     align-items: center; }

The above is all the code to use the "@ keyframes" animation effect of css to realize the horizontal scrolling of pictures. Adjust the scrolling speed and modify the number in "12s" in "animation".