再试滚动大图：《微风细雨》

闲云

欣赏丁香老师的全屏移动美图，点赞支持，中午好！

1. <div style="position:absolute;z-index:32768;background:none;width:100%;left:-2px;margin-top:86px;">
   
2. <style>
   
3.   .container0 {
   
4.   margin: 50px auto;
   
5.   width: 1194px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 14px #880000; overflow: hidden;
   
6.   height: 620px;
   
7. border: 1px solid;
   
8. background: #333 url('https://pic.imgdb.cn/item/671ce499d29ded1a8c4a28e2.jpg') no-repeat center/cover; overflow: hidden;
   
9.   position: relative;
   
10. }
    
11. .photo {
    
12.   position: absolute;
    
13. width: 100%;
    
14.   height: 100%;transform: scale3d(0,0,-300) skew(0,60deg);
    
15.   animation: round 32s infinite;
    
16.   opacity: 0;
    
17. }
    
18. @keyframes round {
    
19.   5% {opacity: 1;}
    
20. 12% {opacity: 1;transform:  scale(1)}
    
21. 18% {opacity: 0;transform:  scale(3)}
    
22. }
    
23. img:nth-child(1) {animation-delay: 28s;}
    
24. img:nth-child(2) {animation-delay: 24s;}
    
25. img:nth-child(3) {animation-delay: 20s;}
    
26. img:nth-child(4) {animation-delay: 16s;}
    
27. img:nth-child(5) {animation-delay: 12s;}
    
28. img:nth-child(6) { animation-delay: 8s;}
    
29. img:nth-child(7) {animation-delay: 4s;}
    
30. img:nth-child(8) {animation-delay: 0s;}
    
31.     </style>
    
32. <div class="container0">
    
33.   <img class="photo" src="https://pic.imgdb.cn/item/6720a0acd29ded1a8c1516d1.jpg" alt="">
    
34.   <img class="photo" src="https://pic.imgdb.cn/item/6720a0acd29ded1a8c1516db.jpg" alt="">
    
35.   <img class="photo" src="https://pic.imgdb.cn/item/6720a0acd29ded1a8c1516e8.jpg" alt="">
    
36.   <img class="photo" src="https://pic.imgdb.cn/item/6720a0acd29ded1a8c1516f9.jpg" alt="">
    
37. <img class="photo" src="https://pic.imgdb.cn/item/6720a0acd29ded1a8c151705.jpg" alt="">
    
38. <img class="photo" src="https://pic.imgdb.cn/item/6720a0acd29ded1a8c151716.jpg" alt="">
    
39. <img class="photo" src="https://pic.imgdb.cn/item/6720a0acd29ded1a8c151723.jpg" alt="">
    
40. <img class="photo" src="https://pic.imgdb.cn/item/6720a0acd29ded1a8c151735.jpg" alt="">
    
41. <div class="container">
    
42.       <div class="btn">
    
43. <span id="bf" onclick="bf();" style="width: 120px; height: 120px;z-index: 550;position: absolute;top:-60px; left:880px;"></span>
    
44.         <span id="bf" onclick="rbf();"></span>
    
45.       </div>
    
46.      <div class="items">
    
47. <div class="lrc">
    
48.         <ul id="ullrc">
    
49.          </ul>
    
50.       </div>
    
51. </div>
    
52. </div>
    
53. </div></div><br>
    
54. <div style="height:740px"></div>
    
55. <div style="position:absolute;z-index:32768;background:none;width:100%;left:-34px;margin-top:6px;">
    
56. <iframe allowfullscreen="true" border="0" frameborder="no" framespacing="0" height="50" scrolling="no" src="//player.bilibili.com/player.html?isOutside=true&amp;aid=493429452&amp;bvid=BV1AN411u7P3&amp;cid=1333680042&amp;p=1" width="1260"></iframe>
    
57. </div><div style="height:90px"></div>
    

复制代码

武朝歌

[i=s] 本帖最后由 丁香 于 2024-11-20 07:08 编辑 [/i]

风清

欣赏丁香滚动大图，非常漂亮的美图！
为你点赞！

西湖

欣赏丁香全屏移动美图！

书香

非常漂亮的美图，配曲也很美。

童声韵灵

[i=s] 本帖最后由 丁香 于 2024-11-16 15:52 编辑 [/i]

蓝朵1111

1. <video loop autoplay style="left:50%; position: absolute; margin-top:90px;width:1200px;height:675px;transform:translate(-50%);"
   
2. src="https://file.uhsea.com/2411/3b7af594fdc48462222000cc84913da86H.mp4" ></video>
   
3. <div style="height:800px;"></div>

复制代码

老学生

闲云 发表于 2024-10-28 12:05
欣赏丁香老师的全屏移动美图，点赞支持，中午好！

欣赏丁香版的全屏移动美图，精彩，向您学习！下午好！

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/2411/ae7869c26370a099aa4a1a00a170cefdXX.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"
    
60. 
    
61. src="https://link.hhtjim.com/163/1406642934.mp3" width="2">
    

复制代码

移动图片加音乐

微尘

祝贺你丁香再次发大图滚动成功！向你学习了。

老谟深虑

        很美的移动大图，歌曲真的好听，点赞！