【漫步特效】一念执着TO 穆云寒 贺芳辰 ｛五张背景转換＋人物叠加｝

云端漫步

云端漫步

@穆云寒 生日快乐！忽略标题哦。标题是歌曲名。

云端漫步

@若依 @穆云寒 @令狐冲 @云笛 @素心 @风晴雪 @泪红颜 @向荣S
@星的祝福 @一鹿向北 @轻舞若芸
@花简静 @愫怡 @淥の詶 @玫の玫
@清梦 @醉美水芙蓉  

云端漫步

要学习代码的可套用，这代码是明码，代码我写清楚了，发表时去除所有中文行如：/* 可根据需要调整透明度 */。你可照着做。
代码多数是英文与数字组成，如中文嵌入数据流慢打开图就慢切记。

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.     box-shadow: 3px 3px 20px #000;
   
9.     user-select: none;
   
10.     overflow: hidden;
    
11.     position: relative;
    
12.     z-index: 1;  
    
13. }
    
14. #vid {
    
15.     position: absolute;
    
16.     width: 130%;
    
17.     height: 130%;
    
18.     object-fit: cover;
    
19.     pointer-events: none;
    
20.     mix-blend-mode: screen;
    
21.       mask: linear-gradient(to top right, red 88%, transparent 0);   
    
22.     -webkit-mask: linear-gradient(to top right, red 88%, transparent 0);   
    
23.     z-index: 6;
    
24.     opacity: .35;
    
25. }
    
26. 
    
27. /* 轮播图片样式 */
    
28. .slide {
    
29.     position: absolute;
    
30.     top: 0;
    
31.     left: 0;
    
32.     width: 100%;
    
33.     height: 100%;
    
34.     background-size: cover;
    
35.     background-position: center;
    
36.     background-repeat: no-repeat;
    
37.     opacity: 0;
    
38.     transition: opacity 1s ease-in-out;
    
39.     z-index: 0;
    
40. }
    
41. 
    
42. /* 初始显示第一张图片 */
    
43. .slide:first-child {
    
44.     opacity: 1;
    
45. }
    
46. 
    
47. /* 人物图样式 - 置于最上层 */
    
48. #character {
    
49.     position: absolute;
    
50.     top: 0;
    
51.     left: 0;
    
52.     width: 100%;
    
53.     height: 100%;
    
54.     background-image: url('https://kkshan.com/data/attachment/forum/202511/02/184734g56zkx55ai55zx52.png');
    
55.     background-size: cover;
    
56.     background-position: center;
    
57.     background-repeat: no-repeat;
    
58.     z-index: 10; /* 确保在最上层 */
    
59. }
    
60. </style>
    
61.   
    
62. <div id="mydiv">
    
63.     <audio id="aud" src="https://ting8.yymp3.com/new23/yanyidan/8.mp3" autoplay loop></audio>
    
64.     <video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/08/29/5d2053251a075.mp4" autoplay="" loop="" muted=""></video>
    
65.    
    
66.     <!-- 轮播图片组 -->
    
67.     <div class="slide" style="background-image: url('https://kkshan.com/data/attachment/forum/202511/02/184732smvxd8z484df4emk.jpg');"></div>
    
68.     <div class="slide" style="background-image: url('https://kkshan.com/data/attachment/forum/202511/02/184732sou9br9bxpdooucu.jpg');"></div>
    
69.     <div class="slide" style="background-image: url('https://kkshan.com/data/attachment/forum/202511/02/184733fnnaykewkfezywmt.jpg');"></div>
    
70.     <div class="slide" style="background-image: url('https://kkshan.com/data/attachment/forum/202511/02/184733lzl535mm1531zi3z.jpg');"></div>
    
71.     <div class="slide" style="background-image: url('https://kkshan.com/data/attachment/forum/202511/02/184734di6dgdipaxrdxvz6.jpg');"></div>
    
72.    
    
73.     <!-- 人物图 -->
    
74.     <div id="character"></div>
    
75. </div>
    
76. 
    
77. <script>
    
78. // 实现图片轮播效果
    
79. let currentIndex = 0;
    
80. const slides = document.querySelectorAll('.slide');
    
81. const totalSlides = slides.length;
    
82. 
    
83. function showNextSlide() {
    
84.     // 隐藏当前图片
    
85.     slides[currentIndex].style.opacity = 0;
    
86.    
    
87.     // 计算下一张图片索引
    
88.     currentIndex = (currentIndex + 1) % totalSlides;
    
89.    
    
90.     // 显示下一张图片
    
91.     slides[currentIndex].style.opacity = 1;
    
92. }
    
93. 
    
94. // 每3秒切换一张图片
    
95. setInterval(showNextSlide, 3000);
    
96. </script>

复制代码

若依

二姐生日快乐，漫步的图好高大尚，哈哈，漂亮的。

云端漫步

若依 发表于 2025-11-2 19:10
二姐生日快乐，漫步的图好高大尚，哈哈，漂亮的。

邻家妹妹来了哈你生日也送你。

若依

云端漫步 发表于 2025-11-2 19:13
邻家妹妹来了哈你生日也送你。

这还用说嘛，不过我生日可要明年五月了，到时候不要你音画，就要写字，哈哈哈。

云端漫步

若依 发表于 2025-11-2 19:15
这还用说嘛，不过我生日可要明年五月了，到时候不要你音画，就要写字，哈哈哈。 ...

好的随你意

一鹿向北

这一看就是有了老乡妹子，把我扔后边了。

一鹿向北

这人物处理的干净，五张背景图各有特点，与人物相配都是完美的结合，赞一个。
祝二姐生日快乐，收礼开心！