【圖片素材】醉夕陽《自動切換》

闲云

闲云

代码如下：

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/672375dad29ded1a8c632e12.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/67235446d29ded1a8c3b7910.jpg" alt="">
    
34.   <img class="photo" src="https://pic.imgdb.cn/item/672375dad29ded1a8c632e12.jpg" alt="">
    
35.   <img class="photo" src="https://pic.imgdb.cn/item/67235447d29ded1a8c3b795d.jpg" alt="">
    
36.   <img class="photo" src="https://pic.imgdb.cn/item/67235446d29ded1a8c3b793e.jpg" alt="">
    
37. <img class="photo" src="https://pic.imgdb.cn/item/67235447d29ded1a8c3b7965.jpg" alt="">
    
38. <img class="photo" src="https://pic.imgdb.cn/item/67235446d29ded1a8c3b794a.jpg" alt="">
    
39. <img class="photo" src="https://pic.imgdb.cn/item/67235447d29ded1a8c3b7974.jpg" alt="">
    
40. <img class="photo" src="https://pic.imgdb.cn/item/67235447d29ded1a8c3b7954.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:840px"></div>
    
55. <div style="position:absolute;z-index:32768;background:none;width:100%;left:-34px;margin-top:-105px;">
    
56. <iframe allowfullscreen="1" frameborder="1" height="1" src="https://www.ixigua.com/iframe/7391887914776396322?autoplay=1" width="2"></iframe>
    
57. </div><div style="height:0px"></div></div>
    

复制代码

武朝歌

漂亮。上午好。欣赏，学习了。赞！

山里娃

欣赏漂亮的夕阳美景。

起个网名好难

闲云 发表于 2024-11-1 08:20
代码如下：

尽量不无用的代码剔除掉

1. <style>
   
2.   .container0 {
   
3.     margin: 50px auto;
   
4.     width: 1194px;
   
5.     box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 14px #880000;
   
6.     overflow: hidden;
   
7.     height: 620px;
   
8.     border: 1px solid;
   
9.     background: #333 url('https://pic.imgdb.cn/item/672375dad29ded1a8c632e12.jpg') no-repeat center/cover;
   
10.     overflow: hidden;
    
11.     position: relative;
    
12.   }
    
13. 
    
14.   .photo {
    
15.     position: absolute;
    
16.     width: 100%;
    
17.     height: 100%;
    
18.     transform: scale3d(0, 0, -300) skew(0, 60deg);
    
19.     animation: round 32s infinite;
    
20.     opacity: 0;
    
21.   }
    
22. 
    
23.   @keyframes round {
    
24.     5% {
    
25.       opacity: 1;
    
26.     }
    
27. 
    
28.     12% {
    
29.       opacity: 1;
    
30.       transform: scale(1)
    
31.     }
    
32. 
    
33.     18% {
    
34.       opacity: 0;
    
35.       transform: scale(3)
    
36.     }
    
37.   }
    
38. 
    
39.   img:nth-child(1) {
    
40.     animation-delay: 28s;
    
41.   }
    
42. 
    
43.   img:nth-child(2) {
    
44.     animation-delay: 24s;
    
45.   }
    
46. 
    
47.   img:nth-child(3) {
    
48.     animation-delay: 20s;
    
49.   }
    
50. 
    
51.   img:nth-child(4) {
    
52.     animation-delay: 16s;
    
53.   }
    
54. 
    
55.   img:nth-child(5) {
    
56.     animation-delay: 12s;
    
57.   }
    
58. 
    
59.   img:nth-child(6) {
    
60.     animation-delay: 8s;
    
61.   }
    
62. 
    
63.   img:nth-child(7) {
    
64.     animation-delay: 4s;
    
65.   }
    
66. 
    
67.   img:nth-child(8) {
    
68.     animation-delay: 0s;
    
69.   }
    
70. </style>
    
71. <div style="position:absolute;width:100%;left:-2px;margin-top:86px;">
    
72.   <div class="container0">
    
73.     <img class="photo" src="https://pic.imgdb.cn/item/67235446d29ded1a8c3b7910.jpg" alt="">
    
74.     <img class="photo" src="https://pic.imgdb.cn/item/672375dad29ded1a8c632e12.jpg" alt="">
    
75.     <img class="photo" src="https://pic.imgdb.cn/item/67235447d29ded1a8c3b795d.jpg" alt="">
    
76.     <img class="photo" src="https://pic.imgdb.cn/item/67235446d29ded1a8c3b793e.jpg" alt="">
    
77.     <img class="photo" src="https://pic.imgdb.cn/item/67235447d29ded1a8c3b7965.jpg" alt="">
    
78.     <img class="photo" src="https://pic.imgdb.cn/item/67235446d29ded1a8c3b794a.jpg" alt="">
    
79.     <img class="photo" src="https://pic.imgdb.cn/item/67235447d29ded1a8c3b7974.jpg" alt="">
    
80.     <img class="photo" src="https://pic.imgdb.cn/item/67235447d29ded1a8c3b7954.jpg" alt="">
    
81.   </div>
    
82. </div>
    
83. <div style="height:840px"></div>
    
84. <iframe frameborder="0" scrolling='no' height="1" src="https://www.ixigua.com/iframe/7391887914776396322?autoplay=1" width="1"></iframe>
    

复制代码

老钟

欣赏老师制作的醉夕陽《自動切換》音画，老师无私奉献作品代码，对网友学习很有帮助，点赞！

蓝朵1111

被这夕阳的美境陶醉了。

西湖

欣赏漂亮的夕阳美景。

闲云

武朝歌 发表于 2024-11-1 08:27
漂亮。上午好。欣赏，学习了。赞！

非常感谢武朝歌老师的关注支持，上午好！

闲云

山里娃 发表于 2024-11-1 08:28
欣赏漂亮的夕阳美景。

非常感谢山里娃老师的关注支持，上午好！