百子图

巨流河

老谟深虑

        老乡我给你做好了。你把这个代码粘贴到你的帖子里。

1. 
   
2. 
   
3. <style>
   
4.   #oBlk {
   
5.     margin-left: 50% ; left: -708px;
   
6.     margin-top:100px;
   
7.     width: 1416px;
   
8.     height: 500px;
   
9.     box-shadow: 3px 3px 10px #000;
   
10.     overflow: hidden;
    
11.     position: absolute;
    
12.   }
    
13. 
    
14.   #oBlk::before,
    
15.   #oBlk::after {
    
16.     position: absolute;
    
17.     content: '';
    
18.     left: var(--curX0);
    
19.     top: 0px;
    
20.     width: 100%;
    
21.     height: 100%;
    
22.     background: url('https://pic.imgdb.cn/item/67403a8ad29ded1a8cc54a32.webp') no-repeat center / cover;
    
23.   }
    
24. 
    
25.   #oBlk::after {
    
26.     left: var(--curX1);
    
27.     transform: scaleX(-1);
    
28.   }
    
29. </style>
    
30. <div id="oBlk"></div>
    
31. <div style="height:420px;"></div>
    
32. <script>
    
33. {
    
34.   let blkWidth = oBlk.offsetWidth;
    
35.   let step = 1.0, tune = 0,
    
36.     curX0 = 0,
    
37.     curX1 = blkWidth,
    
38.     raf;
    
39. 
    
40.   let moving = () =>        {
    
41. /*   
    
42.         //自左向右
    
43.     curX0 += step;
    
44.     curX1 += step;
    
45.     if(curX0 >= blkWidth) curX0 = -blkWidth;
    
46.     if(curX1 >= blkWidth) curX1 = -blkWidth;
    
47. */       
    
48.         //自右向左
    
49.     curX0 -= step;
    
50.     curX1 -= step;
    
51.     if(curX0 <= -blkWidth) curX0 = blkWidth;
    
52.     if(curX1 <= -blkWidth) curX1 = blkWidth;
    
53. 
    
54.     tune = curX1 + (curX0 >= 0 ? 1 : -1);
    
55.     oBlk.style.setProperty('--curX0', curX0 + 'px');
    
56.     oBlk.style.setProperty('--curX1', tune + 'px');
    
57.     raf = requestAnimationFrame(moving);
    
58.   };
    
59.   moving();
    
60. }  
    
61. </script>
    
62. 
    

复制代码

老谟深虑

        百子图好看，欣赏点赞！

童声韵灵

这百子图太漂亮了。多子多福。有人就有财。为你点赞。

抚德

欣赏古朴典雅的历史名画∶百子图？

山里娃

这幅图，在中国是很受欢迎的。
多子多福，一直是中国传统文化中的一个重要因素。

筱亭

换成大图就好了

蓝朵1111

欣赏你的转载，很有历史意味的百子图。