【音畫】圖片自動切換《睡蓮》

闲云

闲云

保存代码：

1. <div style="width: 950px; height: 600px; margin-top:20px; margin-left: -30px;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/67174698d29ded1a8cf68f5d.jpg')0 0/100%  100%; text-align: center;"><img alt="" class="photo" src="https://pic.imgdb.cn/item/67138b1bd29ded1a8c970d4f.jpg"> <img alt="" class="photo" src="https://pic.imgdb.cn/item/67138b1bd29ded1a8c970d61.jpg"> <img alt="" class="photo" src="https://pic.imgdb.cn/item/67138b1bd29ded1a8c970d69.jpg"> <img alt="" class="photo" src="https://pic.imgdb.cn/item/67138b1bd29ded1a8c970d79.jpg"> <img alt="" class="photo" src="https://pic.imgdb.cn/item/67138b1bd29ded1a8c970d85.jpg"> <img alt="" class="photo" src="https://pic.imgdb.cn/item/67138b1bd29ded1a8c970d91.jpg"> <img alt="" class="photo" src="https://pic.imgdb.cn/item/67138b1bd29ded1a8c970dae.jpg"> <img alt="" class="photo" src="https://pic.imgdb.cn/item/67138b1bd29ded1a8c970da7.jpg">
   
2. <style type="text/css">.photo {width: 960px;
   
3.   height: 600px;
   
4.   position: absolute;top:0px; left:0px;z-index: 300;
   
5. filter:contrast(120%)brightness(100%);-webkit-mask-image: radial-gra**nt(black 30% ,transparent 70%);
   
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. 
    
25. img:nth-child(8) {animation-delay: 42s;}
    
26. img:nth-child(7) {animation-delay: 36s;}
    
27. img:nth-child(6) {animation-delay: 30s;}
    
28. img:nth-child(5) {animation-delay: 24s;}
    
29. img:nth-child(4) {animation-delay: 18s;}
    
30. img:nth-child(3) {animation-delay: 12s;}
    
31. img:nth-child(2) {animation-delay: 6s;}
    
32. </style>
    
33. </div><video autoplay="" controls="" height="1" src="https://link.hhtjim.com/kw/273053.mp3" width="2">
    
34. 
    

复制代码

西湖

闲云 发表于 2024-10-22 14:59
保存代码：

欣赏学习【音畫】圖片自動切換《睡蓮》！

书香

美仑美奂，风光无限，曲子配的相得益彰！

闲云

西湖 发表于 2024-10-22 15:04
欣赏学习【音畫】圖片自動切換《睡蓮》！

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

闲云

书香 发表于 2024-10-22 15:07
美仑美奂，风光无限，曲子配的相得益彰！

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

老谟深虑

       欣赏老乡的图片自动切换音画，好美的睡莲。点赞！

山里娃

漂亮的睡莲画面，好听的配曲音乐。赞！

闲云

老谟深虑 发表于 2024-10-22 15:11
欣赏老乡的图片自动切换音画，好美的睡莲。点赞！

非常感谢老乡的关注支持，下午好！

闲云

山里娃 发表于 2024-10-22 15:12
漂亮的睡莲画面，好听的配曲音乐。赞！

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