CSS 实现无缝滚动

起个网名好难

起个网名好难

1. <style>
   
2.   #picBlk {
   
3.     width: calc(4 * var(--picWidth));
   
4.     height: var(--picHeight);
   
5.     position: absolute;
   
6.     left: 0px;
   
7.     animation: mleft 30s linear infinite;
   
8.   }
   
9. 
   
10.   #picBlk img {
    
11.     width: var(--picWidth);
    
12.     height: var(--picHeight);
    
13.     float: left;
    
14.   }
    
15. 
    
16.   #oBlk {
    
17.     width: 1200px;
    
18.     height: var(--picHeight);
    
19.     overflow: hidden;
    
20.     position: relative;
    
21.     margin: 0 0 0 calc(50% - 681px);
    
22.     box-shadow: 4px 4px 10px black;
    
23.     --picWidth: 794px;
    
24.     --picHeight:530px;
    
25.   }
    
26. 
    
27.   @keyframes mleft {
    
28.     to {
    
29.       left: calc(-2 * var(--picWidth));
    
30.     }
    
31.   }
    
32. 
    
33.   #picBlk img:nth-child(even) {
    
34.     transform: scaleX(-1);
    
35.   }
    
36. </style>
    
37. <div id="oBlk">
    
38.   <div id="picBlk">
    
39.     <img src="https://pic.quanjing.com/e3/nl/QJ9127410970.jpg">
    
40.     <img src="https://pic.quanjing.com/e3/nl/QJ9127410970.jpg">
    
41.     <img src="https://pic.quanjing.com/e3/nl/QJ9127410970.jpg">
    
42.     <img src="https://pic.quanjing.com/e3/nl/QJ9127410970.jpg">
    
43.   </div>
    
44. </div>

复制代码

亦是金

好看的无缝滚动背景！欣赏收藏，准备学习套用一个！

樵歌

有一白线。

世外桃源

漂亮哦

世外桃源

这个图片选的好

世外桃源

老师好制作，很流畅的

起个网名好难

亦是金 发表于 2024-4-6 12:56
好看的无缝滚动背景！欣赏收藏，准备学习套用一个！

                               
登录/注册后可看大图

起个网名好难

世外桃源 发表于 2024-4-6 15:23
漂亮哦

                               
登录/注册后可看大图

起个网名好难

世外桃源 发表于 2024-4-6 15:23
这个图片选的好

网上找的，不是太满意。

起个网名好难

樵歌 发表于 2024-4-6 14:14
有一白线。

眼力真棒

小水瓢

衔接处能看到白线，但是，选的这张图特别好，接起来的时候，有一个房子正好是半个房子合成了整个的。

小水瓢

厉害，一个单个的图能合成大长卷

起个网名好难

小水瓢 发表于 2024-4-6 16:28
衔接处能看到白线，但是，选的这张图特别好，接起来的时候，有一个房子正好是半个房子合成了整个的。{:5_10 ...

眼力真棒

起个网名好难

小水瓢 发表于 2024-4-6 16:29
厉害，一个单个的图能合成大长卷

网上找的图，不是很理想的。

红影

这个制作图片可以不大，却可以比较大地显示。又是一个新的背景图滚动代码

红影

难难厉害，这个制作很赞

起个网名好难

红影 发表于 2024-4-6 18:55
这个制作图片可以不大，却可以比较大地显示。又是一个新的背景图滚动代码

只要2倍图片宽度大于框的宽度就行。

起个网名好难

红影 发表于 2024-4-6 18:57
难难厉害，这个制作很赞

                               
登录/注册后可看大图

樵歌

起个网名好难 发表于 2024-4-6 15:31
眼力真棒

选择的图非常好。怎么消去那线线。