《让我们自由飞翔》//勐巴拉娜西

吴林海

欣赏你的《让我们自由飞翔》//勐巴拉娜西  精彩视频制作，点赞！

抚德

欣赏视频佳作《让我们自由飞翔》//勐巴拉娜西，点赞！

山里娃

欣赏好转载。
很喜欢这个五重奏。

童声韵灵

丁香 发表于 2024-10-21 12:24
谢谢你的支持鼓励，下午好！

友谊万岁！

老谟深虑

丁香 发表于 2024-10-21 12:20
我今天早上想把这个图片加上“心在路上”的音乐，可是失败了。

        心在路上：http://cccimg.com/view.php/41692d3a877b49777146a8d1e447ca2d.mp3

丁香

老谟深虑 发表于 2024-10-21 17:34
心在路上：

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

复制代码

丁香

老谟深虑 发表于 2024-10-21 17:34
心在路上：

你看16楼的代码，还是不滚动，我也是复     制粘贴的闲云老师的黄山风景那帖子里的代码。

老谟深虑

       这不是在滚动吗。

丁香

老谟深虑 发表于 2024-10-21 17:48
这不是在滚动吗。

好了，发帖吧？

丁香

1. <style>
   
2.   #oBlk {
   
3.     margin-left: 50% ; left: -598px;
   
4.     margin-top:110px;
   
5.     width: 1210px;
   
6.     height: 640px;
   
7.     box-shadow: 3px 3px 10px #000;
   
8.     overflow: hidden;
   
9.     position: absolute;
   
10.   }
    
11. 
    
12.   #oBlk::before,
    
13.   #oBlk::after {
    
14.     position: absolute;
    
15.     content: '';
    
16.     left: var(--curX0);
    
17.     top: 0px;
    
18.     width: 100%;
    
19.     height: 100%;
    
20.     background: url('https://file.uhsea.com/2410/e5506be460a338bd99d951eacd97a213VH.jpg') no-repeat center / cover;
    
21.   }
    
22. 
    
23.   #oBlk::after {
    
24.     left: var(--curX1);
    
25.     transform: scaleX(-1);
    
26.   }
    
27. </style>
    
28. <div id="oBlk"></div>
    
29. <div style="height:640px;"></div>
    
30. <script>
    
31. {
    
32.   let blkWidth = oBlk.offsetWidth;
    
33.   let step = 1.0, tune = 0,
    
34.     curX0 = 0,
    
35.     curX1 = blkWidth,
    
36.     raf;
    
37. 
    
38.   let moving = () =>        {
    
39. /*   
    
40.         //自左向右
    
41.     curX0 += step;
    
42.     curX1 += step;
    
43.     if(curX0 >= blkWidth) curX0 = -blkWidth;
    
44.     if(curX1 >= blkWidth) curX1 = -blkWidth;
    
45. */      
    
46.         //自右向左
    
47.     curX0 -= step;
    
48.     curX1 -= step;
    
49.     if(curX0 <= -blkWidth) curX0 = blkWidth;
    
50.     if(curX1 <= -blkWidth) curX1 = blkWidth;
    
51. 
    
52.     tune = curX1 + (curX0 >= 0 ? 1 : -1);
    
53.     oBlk.style.setProperty('--curX0', curX0 + 'px');
    
54.     oBlk.style.setProperty('--curX1', tune + 'px');
    
55.     raf = requestAnimationFrame(moving);
    
56.   };
    
57.   moving();
    
58. }  
    
59. </script></div></div><br><br><br><br><br><video autoplay="" controls="" height="1" src="https://link.hhtjim.com/kw/187721696.mp3" width="2">

复制代码