找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 133|回复: 28

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

[复制链接]

316

主题

6467

回帖

3万

积分

版主

积分
36841
发表于 2024-11-1 08:15:20 | 显示全部楼层 |阅读模式 IP:辽宁
本帖最后由 西湖 于 2024-11-7 08:41 编辑


评分

参与人数 10金币 +90 收起 理由
丁香 + 8 赞一个!
风清 + 10 赞一个!
老谟深虑 + 10 赞一个!
吴林海 + 8 赞一个!
月婵 + 10 赞一个!
咕咚来了 + 10 赞一个!
西湖 + 10 赞一个!
蓝朵1111 + 8 赞一个!
老钟 + 8 赞一个!
山里娃 + 8 赞一个!

查看全部评分

316

主题

6467

回帖

3万

积分

版主

积分
36841
 楼主| 发表于 2024-11-1 08:20:25 | 显示全部楼层 IP:辽宁
代码如下:
  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>
复制代码


34

主题

890

回帖

5487

积分

天山茗客

积分
5487
发表于 2024-11-1 08:27:43 | 显示全部楼层 IP:
漂亮。上午好。欣赏,学习了。赞!

49

主题

1万

回帖

4万

积分

版主

积分
45125
发表于 2024-11-1 08:28:48 | 显示全部楼层 IP:陕西
欣赏漂亮的夕阳美景。

27

主题

886

回帖

5731

积分

天山茗客

积分
5731
发表于 2024-11-1 08:47:10 | 显示全部楼层 IP:湖北

尽量不无用的代码剔除掉
  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.   .photo {
  14.     position: absolute;
  15.     width: 100%;
  16.     height: 100%;
  17.     transform: scale3d(0, 0, -300) skew(0, 60deg);
  18.     animation: round 32s infinite;
  19.     opacity: 0;
  20.   }

  21.   @keyframes round {
  22.     5% {
  23.       opacity: 1;
  24.     }

  25.     12% {
  26.       opacity: 1;
  27.       transform: scale(1)
  28.     }

  29.     18% {
  30.       opacity: 0;
  31.       transform: scale(3)
  32.     }
  33.   }

  34.   img:nth-child(1) {
  35.     animation-delay: 28s;
  36.   }

  37.   img:nth-child(2) {
  38.     animation-delay: 24s;
  39.   }

  40.   img:nth-child(3) {
  41.     animation-delay: 20s;
  42.   }

  43.   img:nth-child(4) {
  44.     animation-delay: 16s;
  45.   }

  46.   img:nth-child(5) {
  47.     animation-delay: 12s;
  48.   }

  49.   img:nth-child(6) {
  50.     animation-delay: 8s;
  51.   }

  52.   img:nth-child(7) {
  53.     animation-delay: 4s;
  54.   }

  55.   img:nth-child(8) {
  56.     animation-delay: 0s;
  57.   }
  58. </style>
  59. <div style="position:absolute;width:100%;left:-2px;margin-top:86px;">
  60.   <div class="container0">
  61.     <img class="photo" src="https://pic.imgdb.cn/item/67235446d29ded1a8c3b7910.jpg" alt="">
  62.     <img class="photo" src="https://pic.imgdb.cn/item/672375dad29ded1a8c632e12.jpg" alt="">
  63.     <img class="photo" src="https://pic.imgdb.cn/item/67235447d29ded1a8c3b795d.jpg" alt="">
  64.     <img class="photo" src="https://pic.imgdb.cn/item/67235446d29ded1a8c3b793e.jpg" alt="">
  65.     <img class="photo" src="https://pic.imgdb.cn/item/67235447d29ded1a8c3b7965.jpg" alt="">
  66.     <img class="photo" src="https://pic.imgdb.cn/item/67235446d29ded1a8c3b794a.jpg" alt="">
  67.     <img class="photo" src="https://pic.imgdb.cn/item/67235447d29ded1a8c3b7974.jpg" alt="">
  68.     <img class="photo" src="https://pic.imgdb.cn/item/67235447d29ded1a8c3b7954.jpg" alt="">
  69.   </div>
  70. </div>
  71. <div style="height:840px"></div>
  72. <iframe frameborder="0" scrolling='no' height="1" src="https://www.ixigua.com/iframe/7391887914776396322?autoplay=1" width="1"></iframe>
复制代码

209

主题

6095

回帖

4万

积分

版主

积分
45575
发表于 2024-11-1 08:49:53 | 显示全部楼层 IP:美国
欣赏老师制作的醉夕陽《自動切換》音画,老师无私奉献作品代码,对网友学习很有帮助,点赞!

53

主题

8010

回帖

3万

积分

版主

积分
31925
发表于 2024-11-1 08:56:06 | 显示全部楼层 IP:山东青岛
被这夕阳的美境陶醉了。
蓝朵欢迎你的到来!

12

主题

1185

回帖

1万

积分

超级版主

积分
19459
发表于 2024-11-1 09:03:40 | 显示全部楼层 IP:亚太地区
欣赏漂亮的夕阳美景。

316

主题

6467

回帖

3万

积分

版主

积分
36841
 楼主| 发表于 2024-11-1 09:07:47 | 显示全部楼层 IP:辽宁
武朝歌 发表于 2024-11-1 08:27
漂亮。上午好。欣赏,学习了。赞!

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

316

主题

6467

回帖

3万

积分

版主

积分
36841
 楼主| 发表于 2024-11-1 09:08:14 | 显示全部楼层 IP:辽宁
山里娃 发表于 2024-11-1 08:28
欣赏漂亮的夕阳美景。

非常感谢山里娃老师的关注支持,上午好!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|离退休论坛 ( 浙B2-20100176 )

GMT+8, 2024-11-22 09:32 , Processed in 0.083678 second(s), 24 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表