【音畫】圖片自動切換《湘西鳳凰古城》

闲云

闲云

保存代码：

1. <div style="position:absolute;z-index:32768;background:none;width:100%;left:6px;margin-top:86px;">
   
2. <div style="width: 1200px; height: 600px; margin-top:20px; margin-left: 16px;box-shadow: 0px 0px 0px 0px #045768,0px 0px 0px 0px #99e5f5, 0px 0px 0px 0px #045768; border-radius:0%; overflow:hidden;transform:rotate(0deg);background:url('//yzf0319.com/2022/3yue/txtp/5656.gif')0 0/100%  100%,url('https://pic.imgdb.cn/item/6715cb36d29ded1a8c732e7a.jpg')0 0/150%  100%; text-align: center;"><img alt="" class="photo" src="https://pic.imgdb.cn/item/67182fd3d29ded1a8c1aa652.jpg"> <img alt="" class="photo" src="https://pic.imgdb.cn/item/67182fd3d29ded1a8c1aa662.jpg"> <img alt="" class="photo" src="https://pic.imgdb.cn/item/67182fd3d29ded1a8c1aa66c.jpg"> <img alt="" class="photo" src="https://pic.imgdb.cn/item/67182fd3d29ded1a8c1aa674.jpg"> <img alt="" class="photo" src="https://pic.imgdb.cn/item/67182fd3d29ded1a8c1aa67c.jpg"> <img alt="" class="photo" src="https://pic.imgdb.cn/item/67182fd3d29ded1a8c1aa688.jpg"> <img alt="" class="photo" src="https://pic.imgdb.cn/item/67182fd3d29ded1a8c1aa692.jpg"> <img alt="" class="photo" src="https://pic.imgdb.cn/item/67182fd3d29ded1a8c1aa69f.jpg">
   
3. <style type="text/css">.photo {width: 1200px;
   
4.   height: 600px;
   
5.   position: absolute;top:0px; left:0px;z-index: 300;
   
6.   animation: round 48s infinite;
   
7.   opacity: 0;}
   
8. @keyframes round {1% {
   
9. opacity: 0;
   
10. transform:translate(100%,0%)scale(0);}
    
11. 5% {
    
12. opacity: 1;
    
13. transform:translate(100%,0%)scale(0);}
    
14. 14% {
    
15. opacity: 1;
    
16. transform:translate(0%,0%)scale(1);}
    
17. 16% {
    
18. opacity: 1;
    
19. transform:translate(0%,0%)scale(1);}
    
20. 24% {
    
21. opacity: 0;
    
22. transform:translate(-100%,0%)scale(1);}
    
23. }
    
24. img:nth-child(8) {animation-delay: 42s;}
    
25. img:nth-child(7) {animation-delay: 36s;}
    
26. img:nth-child(6) {animation-delay: 30s;}
    
27. img:nth-child(5) {animation-delay: 24s;}
    
28. img:nth-child(4) {animation-delay: 18s;}
    
29. img:nth-child(3) {animation-delay: 12s;}
    
30. img:nth-child(2) {animation-delay: 6s;}
    
31. </style>
    
32. </div></div><audio id="aud" src="https://storage.live.com/items/1965B2B1656C2AF6!17796?" autoplay="autoplay" loop="loop" controls="controls" style="left:0px; width:1px; position:relative; top:0px;">
    
33. </audio>
    
34. <div style="height:700px"></div><center><br></center>

复制代码

闲云

丁香 发表于 2024-10-23 09:13
欣赏佳作，赞一个！

非常感谢丁香老师的关注支持，上午好！

西湖

漂亮的自动切换图片！学习了！

闲云

西湖 发表于 2024-10-23 09:14
漂亮的自动切换图片！学习了！

非常感谢西湖老师的关注支持，上午好！

咕咚来了

很想看到在水里立柱上盖的房子……那地方还有吗？

老钟

欣赏老师精心制作的圖片自動切換《湘西鳳凰古城》音画，湘西鳳凰古城图片很美，作品精美，点赞！谢谢老师提供音画的代码！学习了.

风清

欣赏闲云版主精美音画佳作！图片自动切换很美，音乐好听，为您点赞！
上午好！

闲云

咕咚来了 发表于 2024-10-23 09:23
很想看到在水里立柱上盖的房子……那地方还有吗？

非常感谢咕咚老师的关注支持，上午好！

闲云

老钟 发表于 2024-10-23 09:26
欣赏老师精心制作的圖片自動切換《湘西鳳凰古城》音画，湘西鳳凰古城图片很美，作品精美，点赞！谢谢老师提 ...

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