【漫步特效】荷塘月色（分享素材与代码）

云端漫步

云端漫步

1. <style>
   
2.     @import 'https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/2/tz01.css';
   
3.     #pa {
   
4.         --offsetX: 0px;
   
5.         width: clamp(600px, 120vw, 1700px); /* 适配论坛 */
   
6.         height: auto;
   
7.         aspect-ratio: 18/9;
   
8.         margin: 50px 0 50px calc(50% - 530px); /* 定位方式 */
   
9.         top: 130px; /* 一致的顶值 */
   
10.         position: relative;
    
11.         --bg: url('http://kkshan.com/data/attachment/forum/202508/17/234804conly7jan6nnh4oa.jpg') no-repeat center/cover;
    
12.         --bg1: url('http://kkshan.com/data/attachment/forum/202508/17/234804conly7jan6nnh4oa.jpg') no-repeat center/cover;
    
13.         --state: running;
    
14.         transition: all 4s cubic-bezier(0.25, 0.1, 0.25, 1);
    
15.         --ma-size: 12%;
    
16.         --per: 0%;
    
17.         --a: 135deg;
    
18.         overflow: hidden;
    
19.         will-change: transform;
    
20.         box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    
21.         z-index: 1; /* 元素覆盖 */
    
22.     }
    
23.     #pa::before {
    
24.         content: '';
    
25.         position: absolute;
    
26.         inset: 0;
    
27.         background: var(--bg1);
    
28.         mask: linear-gradient(var(--a),
    
29.                             rgba(0,0,0,1) 0%,
    
30.                             rgba(0,0,0,0.8) 20%,
    
31.                             rgba(0,0,0,0.5) 50%,
    
32.                             rgba(0,0,0,0.2) 80%,
    
33.                             transparent 100%);
    
34.         z-index: 40;
    
35.         will-change: mask-position;
    
36.         transition: mask-position 0.1s linear;
    
37.     }
    
38.     .qk-vid {
    
39.         mix-blend-mode: screen;
    
40.         opacity: .6;
    
41.         transition: opacity 4s cubic-bezier(0.25, 0.1, 0.25, 1);
    
42.         will-change: opacity;
    
43.         position: absolute;
    
44.         top: 0;
    
45.         left: 0;
    
46.         width: 110%;
    
47.         height: 110%;
    
48.         object-fit: cover;
    
49.         transform: translate(-5%, -5%);
    
50.         z-index: 50;
    
51.     }
    
52.    
    
53.     .loading-indicator {
    
54.         position: absolute;
    
55.         top: 50%;
    
56.         left: 50%;
    
57.         transform: translate(-50%, -50%);
    
58.         width: 40px;
    
59.         height: 40px;
    
60.         border: 3px solid rgba(255, 255, 255, 0.3);
    
61.         border-radius: 50%;
    
62.         border-top-color: white;
    
63.         animation: spin 1s ease-in-out infinite;
    
64.         z-index: 200;
    
65.         display: none;
    
66.     }
    
67.    
    
68.     @keyframes spin {
    
69.         to { transform: translate(-50%, -50%) rotate(360deg); }
    
70.     }
    
71.    
    
72.     @keyframes curtainOpenLeft {
    
73.         0% { width: 100%; transform: translateX(0); opacity: 1; }
    
74.         30% { width: 70%; transform: translateX(-15%); opacity: 1; }
    
75.         70% { width: 30%; transform: translateX(-35%); opacity: 0.8; }
    
76.         100% { width: 0%; transform: translateX(-100%); opacity: 0; }
    
77.     }
    
78.    
    
79.     @keyframes curtainOpenRight {
    
80.         0% { width: 100%; transform: translateX(0); opacity: 1; }
    
81.         30% { width: 70%; transform: translateX(15%); opacity: 1; }
    
82.         70% { width: 30%; transform: translateX(35%); opacity: 0.8; }
    
83.         100% { width: 0%; transform: translateX(100%); opacity: 0; }
    
84.     }
    
85.    
    
86.     .curtain-transition {
    
87.         position: absolute;
    
88.         height: 100%;
    
89.         top: 0;
    
90.         background-size: cover;
    
91.         background-position: center;
    
92.         z-index: 50;
    
93.         will-change: width, transform, opacity;
    
94.         backface-visibility: hidden;
    
95.     }
    
96.    
    
97.     .curtain-left {
    
98.         left: 0;
    
99.         animation: curtainOpenLeft 12s forwards cubic-bezier(0.25, 0.1, 0.25, 1);
    
100.     }
     
101.    
     
102.     .curtain-right {
     
103.         right: 0;
     
104.         animation: curtainOpenRight 12s forwards cubic-bezier(0.25, 0.1, 0.25, 1);
     
105.     }
     
106. </style>
     
107. 
     
108. <div id="pa">
     
109.     <div class="loading-indicator"></div>
     
110.     <audio id="aud" src="https://ting8.yymp3.com/new18/fhzq4/2.mp3" loop autoplay></audio>
     
111.     <video class="qk-vid" src="https://img.tukuppt.com/video_show/2418175/00/02/22/5b52de8ec8111.mp4" autoplay loop muted></video>
     
112. </div>
     
113. 
     
114. <script type="module">
     
115.     var per = 0,
     
116.         step = 0.008,
     
117.         aniCounter = 0,
     
118.         raf,
     
119.         baseInterval = 24000,
     
120.         interval = baseInterval,
     
121.         isPlaying = true,
     
122.         isAudioPlaying = true,
     
123.         animationTimeout;
     
124.    
     
125.     var pics = [
     
126.         'http://kkshan.com/data/attachment/forum/202508/17/234804conly7jan6nnh4oa.jpg',
     
127.         'http://kkshan.com/data/attachment/forum/202508/17/234804c87ud86kzjbte86t.jpg',
     
128.         'http://kkshan.com/data/attachment/forum/202508/17/234804brayylbaab1km6m6.jpg',
     
129.         'http://kkshan.com/data/attachment/forum/202508/17/234805s5pop3gkfereoo5k.jpg',
     
130.     ];
     
131.    
     
132.     // 获取DOM元素
     
133.     const loadingIndicator = document.querySelector('.loading-indicator');
     
134.     const audioElement = document.getElementById('aud');
     
135.     const pa = document.getElementById('pa');
     
136.    
     
137.     // 音频控制函数
     
138.     function toggleAudio() {
     
139.         if (audioElement.paused) {
     
140.             audioElement.play().then(() => {
     
141.                 isAudioPlaying = true;
     
142.             }).catch(e => {
     
143.                 console.log('播放失败:', e);
     
144.             });
     
145.         } else {
     
146.             audioElement.pause();
     
147.             isAudioPlaying = false;
     
148.         }
     
149.     }
     
150.    
     
151.     // 页面交互触发自动播放
     
152.     function handleInteraction() {
     
153.         if (!isAudioPlaying) {
     
154.             audioElement.play().then(() => {
     
155.                 isAudioPlaying = true;
     
156.             }).catch(e => {
     
157.                 console.log('交互触发播放:', e);
     
158.             });
     
159.         }
     
160.         document.removeEventListener('click', handleInteraction);
     
161.         document.removeEventListener('touchstart', handleInteraction);
     
162.     }
     
163.    
     
164.     function preloadImages() {
     
165.         loadingIndicator.style.display = 'block';
     
166.         let loadedCount = 0;
     
167.         
     
168.         pics.forEach(src => {
     
169.             const img = new Image();
     
170.             img.src = src;
     
171.             img.onload = img.onerror = () => {
     
172.                 loadedCount++;
     
173.                 if (loadedCount === pics.length) {
     
174.                     loadingIndicator.style.display = 'none';
     
175.                 }
     
176.             };
     
177.         });
     
178.     }
     
179.    
     
180.     let animationStartTime;
     
181.     function startAnimationLoop() {
     
182.         if (isPlaying) {
     
183.             clearTimeout(animationTimeout);
     
184.             animationStartTime = Date.now();
     
185.             
     
186.             animationTimeout = setTimeout(() => {
     
187.                 changeToNextPic();
     
188.             }, interval);
     
189.         }
     
190.     }
     
191.    
     
192.     function changeToNextPic() {
     
193.         loadingIndicator.style.display = 'block';
     
194.         aniCounter = (aniCounter + 1) % pics.length;
     
195.         updateCurtainAndBackground(() => {
     
196.             loadingIndicator.style.display = 'none';
     
197.         });
     
198.     }
     
199.    
     
200.     function updateCurtainAndBackground(callback) {
     
201.         const picIdx = aniCounter % pics.length;
     
202.         
     
203.         document.querySelectorAll('.curtain-transition').forEach(el => el.remove());
     
204.         
     
205.         const leftCurtain = document.createElement('div');
     
206.         leftCurtain.className = 'curtain-transition curtain-left';
     
207.         leftCurtain.style.backgroundImage = `url(${pics[picIdx]})`;
     
208.         pa.appendChild(leftCurtain);
     
209.         
     
210.         const rightCurtain = document.createElement('div');
     
211.         rightCurtain.className = 'curtain-transition curtain-right';
     
212.         rightCurtain.style.backgroundImage = `url(${pics[picIdx]})`;
     
213.         pa.appendChild(rightCurtain);
     
214.         
     
215.         const img = new Image();
     
216.         img.src = pics[picIdx];
     
217.         img.onload = img.onerror = callback;
     
218.         
     
219.         setTimeout(() => {
     
220.             pa.style.setProperty('--bg1', `url(${pics[picIdx]}) no-repeat center/cover`);
     
221.         }, 2000);
     
222.         
     
223.         const video = document.querySelector('.qk-vid');
     
224.         video.style.opacity = '0.3';
     
225.         setTimeout(() => {
     
226.             video.style.opacity = '0.6';
     
227.         }, 2000);
     
228.         
     
229.         cancelAnimationFrame(raf);
     
230.         per = 0;
     
231.         changePic();
     
232.         
     
233.         if (isPlaying) {
     
234.             startAnimationLoop();
     
235.         }
     
236.     }
     
237.    
     
238.     function changePic() {
     
239.         if (per > 100) {
     
240.             per = 0;
     
241.         } else if (isPlaying) {
     
242.             per += step;
     
243.             document.documentElement.style.setProperty('--per', per + '%');
     
244.             raf = requestAnimationFrame(changePic);
     
245.         }
     
246.     }
     
247.    
     
248.     // 绑定交互事件
     
249.     document.addEventListener('click', handleInteraction);
     
250.     document.addEventListener('touchstart', handleInteraction);
     
251.     document.addEventListener('keydown', (e) => {
     
252.         if (e.key.toLowerCase() === 'm') {
     
253.             toggleAudio();
     
254.             e.preventDefault();
     
255.         }
     
256.     });
     
257.    
     
258.     // 初始化
     
259.     preloadImages();
     
260.     startAnimationLoop();
     
261.     changePic();
     
262.    
     
263.     // 尝试自动播放音乐
     
264.     window.addEventListener('load', () => {
     
265.         if (audioElement.paused) {
     
266.             audioElement.play().then(() => {
     
267.                 isAudioPlaying = true;
     
268.             }).catch(e => {
     
269.                 console.log('等待用户交互:', e);
     
270.             });
     
271.         }
     
272.     });
     
273. </script>
     
274. <BR><BR><BR><BR><BR><BR>
     

复制代码

云端漫步

分享素材

欧阳风刀

特效制作精彩，画面美不胜收！狠狠赞赞！

欧阳风刀

感谢哥们代码及素材的分享！周末愉快啊！

云中白鹤

漂亮，支持一下

圊圊淥詶

好看的特效，完美~~
做的很漂亮

圊圊淥詶

谢谢漫步老师，辛苦了哦，
还分享了代码，漫步老师有心了，有空学一下

圊圊淥詶

谢谢漫步老师的分享，遥祝周末快乐~~

玫の玫

欣赏漫步老师精美制作！