【素。图】第三种绝色~@云端漫步同学

雨声

云端漫步 发表于 2026-6-27 18:42
没事哦，代码你要用我开心，在梦幻诛仙帖下我不是给你代码吗，这视频透明太浓了降低点。 ...

我也想用代码，漫步老师能不能一次发许多图的代码？

雨声

云端漫步 发表于 2026-6-27 18:47
雨声同开心哈喜欢素爷的心格

我俩啊，不分彼此~

云端漫步

视频黑黑的我用兼容模式在看，我酷

云端漫步

雨声 发表于 2026-6-27 18:49
我也想用代码，漫步老师能不能一次发许多图的代码？

，代码我给你，换图换视频换音乐就行。

1. <style>
   
2. #mydiv {
   
3.     margin: 130px 0 30px calc(50% - 900px);
   
4.     display: grid;
   
5.     place-items: center;
   
6.     width: 1700px;
   
7.     height: 850px;
   
8.     background: lightblue url('https://644220.freep.cn/644220/4/301.jpg') no-repeat center/cover;
   
9.     box-shadow: 3px 3px 20px #000;
   
10.     user-select: none;
    
11.     overflow: hidden;
    
12.     position: relative;
    
13.     z-index: 1;  
    
14. }
    
15. #vid {
    
16.     position: absolute;
    
17.     width: 130%;
    
18.     height: 130%;
    
19.     object-fit: cover;
    
20.     pointer-events: none;
    
21.     mix-blend-mode: screen;
    
22.     mask: linear-gradient(to top right, red 88%, transparent 0);   
    
23.     -webkit-mask: linear-gradient(to top right, red 88%, transparent 0);   
    
24.     z-index: 6;
    
25.     opacity: .40;
    
26. }
    
27. #mydiv .img-slider {
    
28.     position: absolute;
    
29.     top: 0;
    
30.     left: 0;
    
31.     width: 100%;
    
32.     height: 100%;
    
33.     z-index: 2;
    
34. }
    
35. #mydiv .img-slider img {
    
36.     position: absolute;
    
37.     top: 0;
    
38.     left: 0;
    
39.     width: 1700px;
    
40.     height: 850px;
    
41.     object-fit: cover;
    
42.     opacity: 0;
    
43.     animation: imgSlider 60s linear infinite;
    
44. }
    
45. @keyframes imgSlider {
    
46.     0% { opacity: 1; transform: scale(1); z-index: 5; }
    
47.     5% { opacity: 0; transform: scale(1.1); z-index: 2; }
    
48.   
    
49.     10% { opacity: 1; transform: translateX(0); z-index: 5; }
    
50.     15% { opacity: 0; transform: translateX(-100%); z-index: 2; }
    
51. 
    
52.     20% { opacity: 1; transform: translateX(0); z-index: 5; }
    
53.     25% { opacity: 0; transform: translateX(100%); z-index: 2; }
    
54. 
    
55.     30% { opacity: 1; transform: translateY(0); z-index: 5; }
    
56.     35% { opacity: 0; transform: translateY(-100%); z-index: 2; }
    
57. 
    
58.     40% { opacity: 1; transform: translateY(0); z-index: 5; }
    
59.     45% { opacity: 0; transform: translateY(100%); z-index: 2; }
    
60. 
    
61.     50% { opacity: 1; transform: rotate(0deg) scale(1); z-index: 5; }
    
62.     55% { opacity: 0; transform: rotate(10deg) scale(0.9); z-index: 2; }
    
63. 
    
64.     60% { opacity: 1; filter: blur(0); z-index: 5; }
    
65.     65% { opacity: 0; filter: blur(10px); z-index: 2; }
    
66. 
    
67.     70% { opacity: 1; filter: brightness(1); z-index: 5; }
    
68.     75% { opacity: 0; filter: brightness(0); z-index: 2; }
    
69. 
    
70.     80% { opacity: 1; transform: rotateY(0deg); z-index: 5; }
    
71.     85% { opacity: 0; transform: rotateY(180deg); z-index: 2; }
    
72. 
    
73.     90% { opacity: 1; clip-path: inset(0 0 0 0); z-index: 5; }
    
74.     95% { opacity: 0; clip-path: inset(50% 0 50% 0); z-index: 2; }
    
75.    
    
76.     100% { opacity: 1; transform: scale(1); z-index: 5; }
    
77. }
    
78. #mydiv .img-slider img:nth-child(1) { animation-delay: 0s; }
    
79. #mydiv .img-slider img:nth-child(2) { animation-delay: 30s; }
    
80. #mydiv .img-slider img:nth-child(3) { animation-delay: 60s; }
    
81. #mydiv .img-slider img:nth-child(4) { animation-delay: 90s; }
    
82. #mydiv .img-slider img:nth-child(5) { animation-delay: 120s; }
    
83. #top-png {
    
84.     position: absolute;
    
85.     top: 0;
    
86.     left: 0;
    
87.     width: 1700px;   
    
88.     height: 850px;  
    
89.     object-fit: cover;
    
90.     z-index: 999;   
    
91.     pointer-events: none;
    
92. }
    
93. </style>
    
94.   
    
95. <div id="mydiv">
    
96.     <img id="top-png" src="https://644220.freep.cn/644220/4/398.png">
    
97. 
    
98.     <audio id="aud" src="https://mp3.joy127.com/music/12898.mp3" autoplay loop></audio>
    
99.     <video id="vid" src="https://img2.tukuppt.com/video_show/3664703/00/01/99/5b4eba60cc57c.mp4" autoplay="" loop="" muted=""></video>
    
100.     <div class="img-slider">
     
101.         <img src="https://644220.freep.cn/644220/4/301.jpg">
     
102.         <img src="https://644220.freep.cn/644220/4/302.jpg">
     
103.         <img src="https://644220.freep.cn/644220/4/303.jpg">
     
104.         <img src="https://644220.freep.cn/644220/4/304.jpg">
     
105.         <img src="https://644220.freep.cn/644220/4/305.jpg">
     
106.     </div>
     
107. </div>

复制代码

雨声

云端漫步 发表于 2026-6-27 18:55
，代码我给你，换图换视频换音乐就行。

最多能放几张图，漫步老师~

云端漫步

雨声 发表于 2026-6-27 19:00
最多能放几张图，漫步老师~

最多的送你西湖十景10个图，图放多了会卡，多图代码要变行逻辑过，如10个图要用10个转场特效，

欧阳风刀

青绿水墨和粉系人物，适配性还挺高，翻页效果不错。

欧阳风刀

欣赏问好素心，顺祝漫步兄收礼愉快！

云端漫步

欧阳风刀 发表于 2026-6-27 19:16
欣赏问好素心，顺祝漫步兄收礼愉快！

欧阳辛苦回帖同喜，

雨声

云端漫步 发表于 2026-6-27 19:06
最多的送你西湖十景10个图，图放多了会卡，多图代码要变行逻辑过，如10个图要用10个转场特效， ...

好的，我明白了，谢谢漫步老师~