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

闲云

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

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-12-21 12:42 编辑 [/i]

略略略略略略

风清

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

西湖

欣赏丁香全屏移动美图！

书香

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

童声韵灵

[ 本帖最后由 丁香 于 2025-1-21 17:09 编辑 ]\n\n<audio src="https://link.hhtjim.com/kw/330305752.mp3" autoplay loop></audio>

蓝朵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>

复制代码

老学生

[i=s] 本帖最后由 丁香 于 2024-12-12 13:10 编辑 [/i]

微尘

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

老谟深虑

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