音画代码（与大家共享）

婴宁

对于音画，本人还是个门外汉，只会简单地按照代码套。
以下的代码，可以说是最简单的，亲们只需要更换自己喜欢的图片和音乐，以及特效即可。
本人班门弄斧了，如有哪位高手能不吝赐教，当倍感荣幸。学而时习之，不亦乐乎！
喜欢音画的新人朋友们，一起来吧 ！

一、《梦里水乡》地址：http://qslt.net/forum.php?mod=viewthread&tid=3450  ，代码如下：

1. <style>
   
2. #papa { margin: 0 0 0 calc(50% - 593px); width: 1300px; height: 850px; background: #000 url('https://s1.ax1x.com/2023/08/05/pPAkpPe.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; --state: paused; }
   
3. #papa::before { position: absolute; left: calc(50% - 30px); bottom: 20px; content: ''; width: 60px; height: 60px; background: radial-gradient(darkred,red); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); cursor: pointer; animation: rot 6s infinite linear var(--state); }
   
4. .lizi { display: block; position: absolute; width: 20px; height: 20px; background: white; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
   
5. .boat { position: absolute; left: 0; top: 410px; width: 100px; height: 100px; background: url('https://638183.freep.cn/638183/t23/2/boat.jpg') no-repeat center/cover; offset-path: path('M0,420 Q400,200 800,170'); offset-distance: 100%; mix-blend-mode: multiply; animation: boating 20s var(--delay) infinite linear var(--state); --delay: 0s; }
   
6. .boat:nth-of-type(2) { --delay: -7s; }
   
7. .boat:nth-of-type(3) { --delay: -14s; }
   
8. svg {position: absolute; left: 0; top:200px; border: 1px solid tan;}
   
9. @keyframes boating { to { offset-distance: 0%; } }
   
10. @keyframes rot { to { transform: rotate(360deg); } }
    
11. </style>
    
12. 
    
13. <div id="papa">
    
14.         <div class="boat"></div>
    
15.         <div class="boat"></div>
    
16.         <div class="boat"></div>
    
17. </div>
    
18. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1868174075" autoplay="autoplay" loop="loop"></audio>
    
19. 
    
20. <script>
    
21. (function() {
    
22.         let stars = [], total = 30, canMove = false;
    
23.         let lSteps = Array.from({length: total}, (v) => Math.random() * 1.5 - .6);
    
24.         let tSteps = Array.from({length: total}, (v) => Math.random() * 1.2 - .6);
    
25. 
    
26.         Array.from({length: total}).forEach((item,key) => {
    
27.                 item = document.createElement('span');
    
28.                 item.className = 'lizi';
    
29.                 let ww = 10 + Math.round(Math.random() * 20),
    
30.                         lPos = Math.round(Math.random() * (papa.offsetWidth - ww)),
    
31.                         tPos = Math.round(Math.random() * (papa.offsetHeight / 3 - ww));
    
32.                 item.style.cssText += `
    
33.                         left: ${lPos}px;
    
34.                         top: ${tPos}px;
    
35.                         width: ${ww}px;
    
36.                         height: ${ww}px;
    
37.                         background: rgba(${200 + Math.floor(Math.random() * 55)},0,0,.7);
    
38.                         animation: rot 4s infinite linear var(--state);
    
39.                 `;
    
40.                 let ar = [item,lPos,tPos,ww];
    
41.                 stars.push(ar);
    
42.                 papa.appendChild(item);
    
43.         });
    
44.         let move = () => {
    
45.                 if(canMove) {
    
46.                         stars.forEach((item,key) => {
    
47.                                 item[1] += lSteps[key];
    
48.                                 item[2] += tSteps[key];
    
49.                                 if(item[1] > papa.offsetWidth - item[3] || item[1] < 0) lSteps[key] = -lSteps[key];
    
50.                                 if(item[2] > papa.offsetHeight / 3 - item[3] || item[2] < 0) tSteps[key] = -tSteps[key];
    
51.                                 item[0].style.left = item[1] + 'px';
    
52.                                 item[0].style.top = item[2] + 'px';
    
53.                         });
    
54.                 }
    
55.                 setTimeout(move,17);
    
56.         };
    
57.         let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'),canMove = false) : (papa.style.setProperty('--state','running'),canMove = true);
    
58.         aud.addEventListener('play', mState, false);
    
59.         aud.addEventListener('pause', mState, false);
    
60.         papa.onclick = () => aud.paused ? aud.play() : aud.pause();
    
61.         move();
    
62. })();
    
63. </script>

复制代码

二、《芙蓉出水》地址：http://qslt.net/forum.php?mod=viewthread&tid=3477 ，代码如下：

1. <style>
   
2. #papa {
   
3.         --state: paused;
   
4.         left: calc(50% - 150px);
   
5.         transform: translateX(-50%);
   
6.         width: 1200px;
   
7.         height: 650px;
   
8.         background: teal url('https://s1.ax1x.com/2023/08/06/pPAN4Z6.jpg') no-repeat center/cover;
   
9.         box-shadow: 8px 4px 18px hsla(0,0%,0%,.28);
   
10.         display: grid;
    
11.         place-items: center;
    
12.         position: relative;
    
13.         z-index: 1;
    
14. }
    
15. #papa::before, #papa::after {
    
16.         position: absolute;
    
17.         content: '';
    
18.         left: -8px;
    
19.         top: -8px;
    
20.         right: -8px;
    
21.         bottom: -8px;
    
22.         border: 8px solid green;
    
23.         border-radius: 6px;
    
24.         pointer-events: none;
    
25.         clip-path: inset(90% 0% 0% 0%);
    
26.         animation: clip 12s infinite linear;
    
27.         animation-play-state: var(--state);
    
28. }
    
29. #papa::after {
    
30.         animation-delay: -6s;
    
31. }
    
32. #mplayer {
    
33.         position: absolute;
    
34.         bottom: 30px;
    
35.         width: 100px;
    
36.         height: 100px;
    
37.         background: url('https://s1.ax1x.com/2023/07/06/pC6B2Wj.jpg') no-repeat center/cover;
    
38.         border-radius: 50%;
    
39.         cursor: pointer;
    
40.         animation: spin 10s infinite linear;
    
41.         animation-play-state: var(--state);
    
42. }
    
43. @keyframes spin { to { transform: rotate(-1turn); } }
    
44. @keyframes clip {
    
45.         25% { clip-path: inset(0% 0% 0% 90%); border-color: green; }
    
46.         50% { clip-path: inset(0% 0% 90% 0%); border-color: lightgreen; }
    
47.         75% { clip-path: inset(0% 90% 0% 0%); border-color: orange; }
    
48.         100% { clip-path: inset(90% 0% 0% 0%); border-color: darkgreen; }
    
49. }
    
50. </style>
    
51. 
    
52. <div id="papa">
    
53.         <div id="mplayer"></div>
    
54.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1866419548.mp3" autoplay loop></audio>
    
55. </div>
    
56. 
    
57. <script>
    
58. (function() {
    
59.         (function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow; background: black; border: 2px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
    
60.         let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
61.         aud.addEventListener('pause', () => mState());
    
62.         aud.addEventListener('play', () => mState());
    
63.         mplayer.addEventListener('click', () => {
    
64.                 aud.paused ? aud.play() : aud.pause();
    
65.         });
    
66. 
    
67.         FS({
    
68.                 pa: papa,
    
69.                 set: 'color: green; background: transparent; border: 2px solid green; bottom: 6px;',
    
70.         });
    
71. })();
    
72. </script>
    

复制代码

三、《萤火虫》地址：http://qslt.net/forum.php?mod=viewthread&tid=3455，代码如下：

1. <style>
   
2. #papa { margin-left: calc(50% - 681px); margin-top:100px; width: 1250px; height: 750px; display: grid; place-items: center; background: #000 url('https://s1.ax1x.com/2023/08/06/pPA2brT.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; perspective: 1000px; overflow: hidden; user-select: none; position: relative; z-index: 1; }
   
3. #papa::after { position: absolute; content: '萤火虫'; top: 30px; font: bold 2.6em sans-serif; color: gold; text-shadow: 2px 2px 3px #000; opacity: .6; }
   
4. #mplayer { position: absolute; bottom: 10px; z-index: 1000; }
   
5. #btnwrap { display: block; fill: hsla(30, 20%, 80%, .9); cursor: pointer; }
   
6. #btnwrap:hover { fill: hsla(90, 100%, 100%, .9); }
   
7. #tmsg { fill: hsla(30, 100%, 90%, .9); stroke: none; font: bold 1em sans-serif; }
   
8. .firefly { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: silver; transform-style: preserve-3d; }
   
9. @keyframes move { to { transform: rotate(0) translate3d(0, 0, 0); } }
   
10. @keyframes flash { from {opacity: .95; } to { opacity: 1; } }
    
11. </style>
    
12. 
    
13. <div id="papa">
    
14.         <svg id="mplayer" width="0" height="0">
    
15.                 <g id="mama" transform="rotate(-90, 60, 60)" style="cursor: pointer;">
    
16.                         <circle id="track" cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke="hsla(60, 20%, 80%, .77)" />
    
17.                         <circle id="prog" cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke="hsla(60,100%,40%,.65)" />
    
18.                 </g>
    
19.                 <g id="btnwrap">
    
20.                         <path id="btnplay" d="M 50 50,50 70,70, 60 z"></path>
    
21.                         <path id="btnpause" d="M 52 50,52 70,57 70,57 50,52 50 z M 60 50,60 70,65 70,65 50,60 50 z" style="display: none;"></path>
    
22.                         <path d="M 57 50,60 50,60 70,57 70 z" fill="transparent" />
    
23.                 </g>
    
24.                 <path id="curPath" d="M 20 70 Q 60 0 100 70" fill="none" stroke="none"/>
    
25.                 <path id="durPath" d="M 20 55 Q 60 110 100 55" fill="none" stroke="none"/>
    
26.                 <g id="tmsg">
    
27.                         <text x="34" y="0"><textPath id="curMsg" xlink:href="#curPath" dominant-baseline="text-after-edge">00:00</textPath></text>
    
28.                         <text x="29" y="0"><textPath id="durMsg" xlink:href="#durPath" dominant-baseline="text-before-edge">00:00</textPath></text>
    
29.                 </g>
    
30.         </svg>
    
31. </div>
    
32. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1856019282.mp3" loop autoplay></audio>
    
33. 
    
34. <script>
    
35. (function() {
    
36.         (function() {for(j=0; j<500; j++) {let ele = document.createElement('span');ele.className = 'firefly';ele.style.cssText += `left: ${Math.random() * 1100}px;top: ${Math.random() * 600}px;background: hsl(${Math.random() * 10 + 50}, ${Math.random() * 50 + 40}%,${Math.random() * 40 + 20}%);box-shadow: 0 0 5px hsla(0,10%,100%,.25);transform: rotate(${Math.random() * 360 + 360}deg) translate3d(${Math.random() * 400 + 100}px,${Math.random() * 300}px,${Math.random() * 1000}px);animation: move 60s infinite ${-10 - Math.random() * 20}s linear;`;papa.appendChild(ele);}})();
    
37.         let cc = { x: 1*track.getAttribute('cx'), y: 1*track.getAttribute('cy'), len: track.getTotalLength(),};
    
38.         prog.style.strokeDasharray = prog.style.strokeDashoffset =cc.len;
    
39.         btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
    
40.         mama.onclick = (e) => {let deg = Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;deg += (e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;aud.currentTime = aud.duration * deg / 360;};
    
41.         aud.addEventListener('pause', () => mState());
    
42.         aud.addEventListener('play', () => mState());
    
43.         aud.addEventListener('seeked', () => aud.play());
    
44.         aud.addEventListener('timeupdate', () => {prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration;curMsg.textContent = toMin(aud.currentTime);durMsg.textContent = toMin(aud.duration);});
    
45.         let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
    
46.         let toMin = (val)  => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if(min < 10) min = '0' + min;if(sec < 10) sec = '0' + sec;return min + ':' + sec;};
    
47.         document.title = '萤火虫  翻唱：婴宁';
    
48. })();
    
49. 
    
50. </script>
    

复制代码

婴宁

四、《江南》地址：http://qslt.net/forum.php?mod=viewthread&tid=3571，代码如下：

1. <style>
   
2. #papa { margin: auto; width: 1200px; height: 660px; background: url('https://s1.ax1x.com/2023/08/08/pPVYxn1.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; user-select: none; z-index: 1; --opt: .25;  }
   
3. #mplayer { position: absolute; bottom: 20px; display: grid; grid-template-columns: auto auto auto; place-items: center; gap: 6px; user-select: none; }
   
4. #btnplay { width: 40px; height: 40px; text-align: center; font: normal 40px/40px sans-serif; color: snow; cursor: pointer; animation: rot linear 4s infinite; }
   
5. #prog { --ww: 0px; width: 300px; height: 12px; border: 1px solid green; border-radius: 6px; background: snow; opacity: .65; position: relative; }
   
6. #prog::before { position: absolute; content: ''; width: var(--ww); height: 12px; border-radius: 6px; background: snow linear-gradient(90deg, orange, green); opacity: .75; }
   
7. #audtime { font: normal 14px sans-serif; color: snow; }
   
8. #lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; top: 30px; font: bold 2.4em sans-serif; color: hsl(0,10%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,0%,0%,.95)); }
   
9. #lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(0,50%,20%,.45),hsla(140,100%,50%,.75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
   
10. #fish { offset-path: path('M310 195a93.5 62 0 1 0 187 0a93.5 62 0 1 0 -187 0z'); offset-distance: 100%; animation: swim 50s infinite; }
    
11. @keyframes cover1 { from { width: 0; } to { width: 100%; } }
    
12. @keyframes cover2 { from { width: 0; } to { width: 100%; } }
    
13. @keyframes rot { to { transform: rotate(1turn); } }
    
14. @keyframes swim { to { offset-distance: 0%; } }
    
15. </style>
    
16. 
    
17. <div id="papa">
    
18.         <img id="fish" src="https://wj1.zp68.com:812/lxx/yunhua/2022/10/02/gnyu.jpg" alt="" />
    
19.         <div id="lrc" data-lrc="江南">演唱 婴宁</div>
    
20.         <div id="mplayer">
    
21.                 <span id="btnplay">❁</span>
    
22.                 <span id="prog"></span>
    
23.                 <span id="audtime">00:00 | 00:00</span>
    
24.         </div>
    
25. </div>
    
26. <script>
    
27. (function() {
    
28.         let aud = new Audio(), mKey = 0, mFlag = true;
    
29.         let lrcAr = [];
    
30.         aud.src = 'https://music.163.com/song/media/outer/url?id=1863362726.mp3';
    
31.         aud.loop = true;
    
32.         aud.autoplay = true;
    
33.         if(aud.paused) btnplay.style.animationPlayState = 'paused';
    
34.         btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
    
35.         prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
    
36.         aud.addEventListener('seeked', () => calcKey());
    
37.         aud.addEventListener('pause', () =>mState());
    
38.         aud.addEventListener('play', () =>mState());
    
39.         aud.addEventListener('timeupdate', () => {let prg = aud.currentTime * prog.offsetWidth / aud.duration < 6 ? 6 : aud.currentTime * prog.offsetWidth / aud.duration;prog.style.setProperty('--ww', prg + 'px');audtime.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);for(j=0; j<lrcAr.length; j++) {if(aud.currentTime >= lrcAr[j][0]) {cKey = j;if(mKey === j) showLrc(lrcAr[j][2]);else continue;}}});
    
40.         let calcKey = () => {for(j = 0; j < lrcAr.length; j ++) {if(aud.currentTime <= lrcAr[j][0]) {mKey = j - 1;break;}}if(mKey <0) mKey = 0;if(mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);showLrc(time);};
    
41.         let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr[mKey][1];lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
    
42.         let mState = () => aud.paused ? (btnplay.style.animationPlayState='paused',lrc.style.setProperty('--state', 'paused'),papa.style.setProperty('--opt','0')) : (btnplay.style.animationPlayState='running', lrc.style.setProperty('--state', 'running'),papa.style.setProperty('--opt','.25'));
    
43.         let toMin = (val)  => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if(min < 10) min = '0' + min;if(sec < 10) sec = '0' + sec;return min + ':' + sec;}
    
44. })();
    
45. </script>

复制代码

五、《我在纳林湖等着你》地址：http://qslt.net/forum.php?mod=viewthread&tid=3621，，代码如下：

1. <style>
   
2. #papa { left:-20px; width: 1200px; height: 596px; background: lightgreen url('https://s1.ax1x.com/2023/08/09/pPZYqRe.jpg') no-repeat center/cover; box-shadow: 3px 3px 24px #000; position: relative; }
   
3. #ball { position: absolute; width: 60px; height: 60px; background: rgba(0,255,255,.75) radial-gradient(at 35% 35%, lightgray, transparent); border-radius: 50%; cursor: pointer; }
   
4. #tit { position: absolute; padding: 0; margin: 0; left: 20px; top: 20px; font: bold 2em sans-serif; color: #F6FCEF; text-shadow: 1px 1px 2px rgba(0,0,0,.75); }
   
5. </style>
   
6. 
   
7. <div id="papa">
   
8.         <span id="tit">我在纳林湖等着你</span>
   
9.         <span id="ball"></span>
   
10. </div>
    
11. 
    
12. <script>
    
13. let moveX = 0, moveY = 0, stepX = 1, stepY = 1, canMove = true, aud = new Audio(), timer;
    
14. 
    
15. aud.src = 'https://music.163.com/song/media/outer/url?id=1851599756.mp3';
    
16. aud.loop = true;
    
17. aud.autoplay = true;
    
18. 
    
19. timer = requestAnimationFrame(motion);
    
20. 
    
21. function motion() {
    
22.         moveX += stepX;
    
23.         moveY += stepY;
    
24.         ball.style.left = moveX + 'px';
    
25.         ball.style.top = moveY + 'px';
    
26.         timer = requestAnimationFrame(motion);
    
27.         if(moveX < 0 || moveX > papa.offsetWidth - ball.offsetWidth) stepX = -stepX;
    
28.         if(moveY < 0 || moveY > papa.offsetHeight - ball.offsetHeight) stepY = -stepY;
    
29. }
    
30. 
    
31. ball.onclick = () => aud.paused ? (aud.play(), requestAnimationFrame(motion)) : (aud.pause(), cancelAnimationFrame(timer));
    
32. </script>

复制代码

六、《我要去西藏》地址：http://qslt.net/forum.php?mod=viewthread&tid=3629，这个飞鹰的特效，大家可以根据自己的图片，换成千山勋章里的大灵宠。代码如下：

1. <css-doodle grid="1x6" id="papa">
   
2.         :doodle {
   
3.                 @size: 1200px 798px;
   
4.                 background: url('http://img.mp.sohu.com/upload/20170811/85f4408116424bca9960b9aaa7b163fa_th.png');
   
5.                 box-shadow: 0 0 8px #000;
   
6.                 position: relative;
   
7.                 margin: 0 0 0 calc(50% - 531px);
   
8.                 z-index: 1;
   
9.                 --ww: 300px; /* 进度条总长 */
   
10.                 --prog: 0; /* 进度 */
    
11.                 --tt1: '00:00'; /* 当前播放时间 */
    
12.                 --tt2: '00:00'; /* 音乐时长 */
    
13.                 --xplace: 50%; /* 播放器水平定位 */
    
14.                 --yplace: 98%; /* 播放器垂直定位 */
    
15.                 --color: snow;
    
16.                 --state: paused; /* 关键帧运行状态 */
    
17.         }
    
18.         /* 单元格1 ：进度条 */
    
19.         @nth(1) {
    
20.                 @size: var(--ww) 2px;
    
21.                 @place: var(--xplace) var(--yplace);
    
22.                 background: silver;
    
23.                 :before, :after { content: ''; }
    
24.                 :before {
    
25.                         position: absolute;
    
26.                         left: 0;
    
27.                         width: var(--prog);
    
28.                         height: 100%;
    
29.                         background: var(--color);
    
30.                 }
    
31.                 :after {
    
32.                         width: 100%;
    
33.                         height: 10px;
    
34.                         cursor: pointer;
    
35.                 }
    
36.         }
    
37.         /* 单元格2 ：播放时间信息 */
    
38.         @nth(2) {
    
39.                 @size: var(--ww) 20px;
    
40.                 @place: var(--xplace) calc(var(--yplace) - 20px);
    
41.                 :before, :after{
    
42.                         position: absolute;
    
43.                         width: 100%;
    
44.                         height: 100%;
    
45.                         color: var(--color);
    
46.                 }
    
47.                 :before { content: var(--tt1); }
    
48.                 :after { content: var(--tt2); text-align: right; }
    
49.         }
    
50. 
    
51.         /* 单元格3和4 ：播放按钮 */
    
52.         @nth(3,4) {
    
53.                 @size: 60px;
    
54.                 @place: var(--xplace) calc(var(--yplace) - 36px);
    
55.                 cursor: pointer;
    
56.         }
    
57.         @nth(3) {
    
58.                 @size: 50px;
    
59.                 @shape: clover 4;
    
60.                 background: var(--color);
    
61.                 animation: rot 6s infinite linear var(--state);
    
62.         }
    
63.         @match(i ≥ 5) {
    
64.                 @size: 100px 88px;
    
65.                 @place: 50px 44px;
    
66.                 background: url('https://638183.freep.cn/638183/t22/gif/ying1.gif');
    
67.                 offset-path: path('M50 44 Q500 300 900 44');
    
68.                 offset-distance: 0%;
    
69.                 animation: fly 10s calc(@r(1,10) * -1s) infinite linear var(--state);
    
70.         }
    
71.         @keyframes rot { to { transform: rotate(360deg); } }
    
72.         @keyframes fly { to { offset-distance: 100%; }}
    
73. </css-doodle>
    
74. 
    
75. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1851314605" autoplay="autoplay" loop="loop"></audio>
    
76. 
    
77. <script>
    
78. (function(){
    
79.         let script = document.createElement('script');
    
80.         script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
    
81.         document.head.appendChild(script);
    
82.         let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
    
83.         let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
84.         aud.addEventListener('timeupdate', () => {
    
85.                 papa.style.setProperty('--prog', 100*aud.currentTime/aud.duration + '%');
    
86.                 papa.style.setProperty('--tt1', `'${toMin(aud.currentTime)}'`);
    
87.                 papa.style.setProperty('--tt2', `'${toMin(aud.duration)}'`);
    
88.         });
    
89.         aud.addEventListener('play', mState, false);
    
90.         aud.addEventListener('pause', mState, false);
    
91.         window.onload = () => {
    
92.                 let btns = papa.shadowRoot.querySelectorAll('cell');
    
93.                 let ww = parseInt(window.getComputedStyle(papa).getPropertyValue('--ww'));
    
94.                 btns[3].onclick = () => aud.paused ? aud.play() : aud.pause();
    
95.                 btns[0].onclick = (e) => aud.currentTime = e.offsetX * aud.duration / ww;
    
96.         }
    
97. })();
    
98. </script>

复制代码

婴宁

七、《山水画》地址：http://qslt.net/forum.php?mod=viewthread&tid=3627，代码如下：

1. <style>
   
2.         #papa { margin: auto; display: grid; place-items: center; width: 1200px; height: 640px; background: url('https://s1.ax1x.com/2023/07/07/pCcFkwQ.jpg') no-repeat center/cover; position: relative; }
   
3.         #canv { position: absolute; }
   
4.         #disc { position: absolute; width: 40px; height: 40px; left: 10px; bottom: 10px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }
   
5.         #lrcbox { position: absolute; left: 60px; bottom: 10px;  font: bold 22px / 40px sans-serif; color: snow; text-shadow: 2px 2px 4px #222; }
   
6.         @keyframes rot { to { transform: rotate(360deg); } }
   
7. </style>
   
8. 
   
9. <div id="papa">
   
10.         <span id="lrcbox">山水画</span>
    
11.         <canvas id="canv"></canvas>
    
12.         <span id="disc"></span>
    
13. </div>
    
14. 
    
15. <script type="text/javascript">
    
16. let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
    
17. let r = 10, speed = 0.5, idx = 0;
    
18. let w = canv.width = 600, h = canv.height = 700;
    
19. let ctx = canv.getContext('2d');
    
20. let images = new Array(), aud = new Audio();
    
21. 
    
22. aud.src = 'https://music.163.com/song/media/outer/url?id=1857242307.mp3';
    
23. aud.loop = true;
    
24. aud.autoplay = true;
    
25. disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
    
26. disc.onclick = () => aud.paused ? aud.play() : aud.pause();
    
27. aud.addEventListener('playing',()  => disc.style.animationPlayState = 'running');
    
28. aud.addEventListener('pause',()  => disc.style.animationPlayState = 'paused');
    
29. 
    
30. function preload() {
    
31.         for (j = 0; j < preload.arguments.length; j++) {
    
32.                 images[j] = new Image()
    
33.                 images[j].src = preload.arguments[j]
    
34.         }
    
35. }
    
36. preload(
    
37.         'https://s1.ax1x.com/2023/08/07/pPVFV3Q.jpg',
    
38.         'https://s1.ax1x.com/2023/08/07/pPVFE9g.jpg',
    
39.         'https://s1.ax1x.com/2023/08/07/pPVFk4S.jpg',
    
40.         'https://s1.ax1x.com/2023/08/07/pPVFFN8.jpg',
    
41.         
    
42. )
    
43. 
    
44. idx = num(0, images.length - 1);
    
45. 
    
46. (function draw() {
    
47.         ctx.clearRect(0, 0, w, h);
    
48.         ctx.save();
    
49.         ctx.beginPath();
    
50.         ctx.arc(w / 2, h / 2, r, 0, Math.PI*2);
    
51.         ctx.closePath();
    
52.         ctx.fillStyle = "transparent";
    
53.         ctx.fill();
    
54.         ctx.clip();
    
55.         ctx.drawImage(images[idx], 0, 0, w, h);
    
56.         ctx.restore();
    
57.         r += speed;
    
58.         if (r > 250 || r <= 0) speed = -speed;
    
59.         if(r <= 0) idx = num(0, images.length - 1);
    
60.         requestAnimationFrame(draw);
    
61. })();
    
62. 
    
63. </script>

复制代码

八、《那一世》地址：http://qslt.net/forum.php?mod=viewthread&tid=3572，代码如下：

1. <style>
   
2. #papa {
   
3.         margin: -80px 0 0 calc(50% - 593px);
   
4.         width: 1200px;
   
5.         height: 690px;
   
6.         background: lightgreen url('https://s1.ax1x.com/2023/08/09/pPZtsOA.jpg') no-repeat center/cover;
   
7.         box-shadow: 3px 3px 20px #000;
   
8.         position: relative;
   
9. }
   
10. #mplayer {
    
11.         position: absolute;
    
12.         width: 160px;
    
13.         height: 160px;
    
14.         right: 200px;
    
15.         top: 60%;
    
16.         border-radius: 50%;
    
17.         cursor: pointer;
    
18.         animation: rot 8s linear infinite;
    
19. }
    
20. #lrc {
    
21.         --state: paused;
    
22.         --motion: cover2;
    
23.         --tt: 2s;
    
24.         --bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(80, 70%, 50%, .65));
    
25.         position: absolute;
    
26.         left: 50%;
    
27.         transform: translate(-50%);
    
28.         top: 5px;
    
29.         font: bold 2em sans-serif;
    
30.         color: snow;
    
31.         white-space: pre;
    
32.         -webkit-background-clip: text;
    
33.         filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));
    
34. }
    
35. #lrc::before {
    
36.         position: absolute;
    
37.         content: attr(data-lrc);
    
38.         width: 20%;
    
39.         height: 100%;
    
40.         color: transparent;
    
41.         overflow: hidden;
    
42.         white-space: pre;
    
43.         background: var(--bg);
    
44.         filter: inherit;
    
45.         -webkit-background-clip: text;
    
46.         animation: var(--motion) var(--tt) linear forwards;
    
47.         animation-play-state: var(--state);
    
48. }
    
49. @keyframes cover1 { from { width: 0; } to { width: 100%; } }
    
50. @keyframes cover2 { from { width: 0; } to { width: 100%; } }
    
51. @keyframes rot { to { transform: rotate(1turn); } }
    
52. </style>
    
53. 
    
54. <div id="papa">
    
55.         <div id="lrc" data-lrc="HCPlayer">《那一世》  演唱 婴宁</div>
    
56.         <img id="mplayer" src="https://s1.ax1x.com/2023/06/21/pCGOPL6.jpg" alt="" />
    
57.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1921184311.mp3" loop autoplay></audio>
    
58. </div>
    
59. 
    
60. <script>
    
61. (function() {
    
62. /*原始lrc歌词*/
    
63. let lrcStr = `
    
64. 
    
65. 
    
66. /*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画
    
67. 
    
68. /*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
    
69. let lrcTime = (ar) => {
    
70.         let tmpAr = [];
    
71.         for(j = 0; j <ar.length - 1; j ++) {
    
72.                 if(j !== ar.length - 1) tmpAr[j] = parseFloat((ar[j+1][0] - ar[j][0]).toFixed(1));
    
73.         }
    
74.         let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
    
75.         tmpAr.push(aver);
    
76.         tmpAr.forEach((item,key) => {
    
77.                 ar[key][2] = item > aver ? aver : item;
    
78.         });
    
79.         return ar;
    
80. };
    
81. 
    
82. /*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
    
83. let getLrcAr = (text) => {
    
84.         let lrcAr = [];
    
85.         let calcRule = [60,1,0.001];
    
86.         for(x of text.split('\n')) {
    
87.                 let ar = [];
    
88.                 let re = /\d+[\.:]\d+([\.:]\d+)?/g;
    
89.                 let geci = x.replace(re,'');
    
90.                 if(geci) {
    
91.                         geci = geci.replace(/[\[\]\'"\t,]s?/g,'');
    
92.                         let time = x.match(re);
    
93.                         if(time != null) {
    
94.                                 for(y of time) {
    
95.                                         let tmp = y.match(/\d+/g);
    
96.                                         let sec = 0;
    
97.                                         for(z in tmp) sec += tmp[z] * calcRule[z];
    
98.                                         ar[0] = [parseFloat(sec.toFixed(2)), geci];
    
99.                                         lrcAr.push(ar[0]);
    
100.                                 }
     
101.                         }
     
102.                 }
     
103.         }
     
104.         lrcAr.sort((a,b)=> a[0] - b[0]);
     
105.         return(lrcTime(lrcAr));
     
106. };
     
107. 
     
108. /*函数 ：模拟显示同步歌词*/
     
109. let showLrc = (time) => {
     
110.         let name = mFlag ? 'cover1' : 'cover2';
     
111.         lrc.innerHTML = lrcAr[mKey][1];
     
112.         lrc.dataset.lrc = lrcAr[mKey][1];
     
113.         lrc.style.setProperty('--motion', name);
     
114.         lrc.style.setProperty('--tt', time + 's');
     
115.         lrc.style.setProperty('--state', 'running');
     
116.         mKey += 1;
     
117.         mFlag = !mFlag;
     
118. };
     
119. 
     
120. /*函数 ：处理当前歌词索引 mKey*/
     
121. let calcKey = () => {
     
122.         for (j = 0; j < lrcAr.length; j++) {
     
123.                 if (aud.currentTime <= lrcAr[j][0]) {
     
124.                         mKey = j - 1;
     
125.                         break;
     
126.                 }
     
127.         }
     
128.         if (mKey < 0) mKey = 0;
     
129.         if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
     
130.         let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);
     
131.         showLrc(time);
     
132. };
     
133. 
     
134. /*格式化时间信息*/
     
135. let toMin = (val) => {
     
136.         if (!val) return '00:00';
     
137.         val = Math.floor(val);
     
138.         let min = parseInt(val / 60),
     
139.         sec = parseFloat(val % 60);
     
140.         if (min < 10) min = '0' + min;
     
141.         if (sec < 10) sec = '0' + sec;
     
142.         return min + ':' + sec;
     
143. }
     
144. 
     
145. /*函数 ：关键帧动画状态切换*/
     
146. let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');
     
147. 
     
148. /*监听播放进度*/
     
149. aud.addEventListener('timeupdate', () => {
     
150.         for (j = 0; j < lrcAr.length; j++) {
     
151.                 if (aud.currentTime >= lrcAr[j][0]) {
     
152.                         cKey = j;
     
153.                         if (mKey === j) showLrc(lrcAr[j][2]);
     
154.                         else continue;
     
155.                 }
     
156.         }
     
157. });
     
158. 
     
159. aud.addEventListener('pause', () => mState());/*监听暂停事件*/
     
160. aud.addEventListener('play', () => mState());/*监听播放事件*/
     
161. aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
     
162. mplayer.addEventListener('click', () => { aud.paused ? aud.play() : aud.pause(); });
     
163. 
     
164. let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
     
165. })();
     
166. </script>

复制代码

九、《红楼梦》地址：http://qslt.net/forum.php?mod=viewthread&tid=3686，代码如下：

1. <style>
   
2. #papa { margin: 0 0 0 calc(50% - 593px);; display: grid; place-items: center; width: 1200px; height: 640px; background: gray url('https://s1.ax1x.com/2023/08/09/pPZYSCF.jpg') no-repeat center/cover; box-shadow: 8px 4px 20px #000; overflow: hidden; user-select: none; position: relative; perspective: 3000px; z-index: 1; }
   
3. </style>
   
4. 
   
5. <div id="papa"></div>
   
6. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1350265233.mp3" loop autoplay></audio>
   
7. 
   
8. <script >
   
9. (function() {
   
10.         (function(mkPlayer) {let defaults = {lrcAr: [[2, "婴宁翻唱", 3],[6, "", 1]],ttAr: ['婴宁', '论坛',  '在线','HCP','Player'],红楼遗梦: 'top: 20px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 20px; left: calc(50% - 50px);',playerCode: `<style>#mplayer {--bg1: tan;--bg2: tan;--bg3: tan;--bg4: tan;--bg5: tan;--bg6: tan;--border: 1px dotted orange;position: absolute;width: 120px;height: 80px;cursor: pointer;transform-style: preserve-3d;animation: rot 10s linear infinite;animation-play-state: paused;display: grid;place-items: center;}#mplayer > span {width: 100%;height: 100%;border: var(--border);display: grid;place-items: center;font: norml 1.5em sans-serif;position: absolute;}#btnMsg {--btnColor: white;--btnBg: #0089f0;position: absolute;color: var(--btnColor);background: var(--btnBg);opacity: 0;border: 2px solid var(--btnColor);border-radius: 8px;padding: 4px;transition: all .75s;cursor: pointer;z-index: 901;}#lrc {--motion: cover2;--tt: 1s;--state: running;--bg: linear-gradient(180deg, hsla(100, 10%, 50%, .75), hsla(100, 100%, 20%, .65));position: absolute;font: bold 2.4em sans-serif;color: hsl(100, 100%, 90%);white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 2px hsla(0, 100%, 0%, .85));z-index: 900;}#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}@keyframes rot { to {transform: rotateY(-360deg); } }@keyframes cover1 { from { width: 0; } to { width: 100%; } }@keyframes cover2 { from { width: 0; } to { width: 100%; } }</style><div id="lrc"data-lrc="">红楼梦 </div><div id="mplayer"><span></span><span></span><span></span><span></span><span></span><span></span></div><span id="btnMsg">全屏观赏</span>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;btnMsg.style.cssText += data.btn_css;let mKey = 0,mFlag = true,fs = false,tnow = Date.now(),timerId;let sps = mplayer.children;let width = mplayer.offsetWidth, angle = 60;let trz = Math.ceil(Math.tan(Math.PI / 180 * (180 - angle) /2 ) * width / 2);Array.from(sps).forEach( (item,key) => {let ry = Math.floor(key*60);sps[key].style.transform = `rotateY(${ry}deg) translateZ(${trz}px)`;sps[key].style.background = `var(--bg${key+1})`;sps[key].innerText = data.ttAr[key];});mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();btnMsg.onclick = () => fs ? document.exitFullscreen() : papa.requestFullscreen();papa.onmousemove = (e) => {clearTimeout(timerId);btnMsg.style.opacity = '.95';timerId = setTimeout('btnMsg.style.opacity = "0"', 3000);};document.addEventListener("fullscreenchange", () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'), mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state', 'running'), mplayer.style.animationPlayState = 'running');aud.addEventListener('timeupdate', () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr[j][0]) {if (mKey === j) showLrc(data.lrcAr[j][2]);else continue;}}});let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr[mKey][1];lrc.dataset.lrc = data.lrcAr[mKey][1].replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr[j][0]) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr[mKey][2] - (aud.currentTime - data.lrcAr[mKey][0]);showLrc(time);};};mkPlayer.HCPlayer = playCode;})(this);
    
11.         let lrcAr = [];
    
12.         HCPlayer({
    
13.                 lrcAr: lrcAr,
    
14.                 lrc_css:`
    
15.                         --bg: linear-gradient(hsla(180,55%,40%,.15),hsla(200,90%,45%,.7));
    
16.                         top: 20px;
    
17.                         color: snow;
    
18.                 `,
    
19.                 ttAr: ['','','','','',''],
    
20.                 player_css: `
    
21.                         --bg1: url('http://img.jiaodong.net/pic/0/11/39/98/11399808_269919.jpg') no-repeat center/cover;
    
22.                         --bg2: url('https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1066440951,166135310&fm=175&s=52B03C8D504276EE6224BCED03001021&w=640&h=714&img.JPE') no-repeat center/cover;
    
23.                         --bg3: url('https://p0.ssl.qhimgs1.com/sdr/400__/t01be27a3468b4b51f0.jpg') no-repeat center/cover;
    
24.                         --bg4: url('https://p7.itc.cn/images01/20210826/b0d50c044063476eb1f5b8d9598eeea1.jpeg') no-repeat center/cover;
    
25.                         --bg5: url('http://n.sinaimg.cn/sinacn20200201ac/130/w501h429/20200201/7015-intiarq0778300.jpg') no-repeat center/cover;
    
26.                         --bg6: url('https://i0.hdslb.com/bfs/article/1a6568c98acbb5966367a69ccd8ecdfee7113fd2.jpg') no-repeat center/cover;
    
27.                         --bg7: url('http://n.sinaimg.cn/sinacn10/197/w600h397/20180723/9bdd-hftenhy7491741.jpg') no-repeat center/cover;
    
28.                         --bg8: url('http://5b0988e595225.cdn.sohucs.com/images/20191211/6fcd2f545818415983dfbd5bd67b096b.jpeg') no-repeat center/cover;
    
29.                         --bg9: url('http://5b0988e595225.cdn.sohucs.com/images/20180116/910d0ef221094b1b96d7a0f15ecf17aa.jpeg') no-repeat center/cover;
    
30.                         --border: 1px dotted olive;
    
31.                         width: 220px;
    
32.                         height: 200px;
    
33.                         top: 120px;
    
34.                 `,
    
35.                 btn_css: '--btnColor: white; --btnBg: transparent;',
    
36.         });
    
37. })();
    
38. </script>

复制代码

十、《天空之城》地址：http://qslt.net/forum.php?mod=viewthread&tid=3689，代码如下：

1. <style>
   
2. #mydiv {
   
3.   margin: -80px 0 0 calc(50% - 593px);
   
4.   width: 1200px;
   
5.   height: 772px;
   
6.   background: #000 url('https://s1.ax1x.com/2023/08/10/pPeXkkQ.png') no-repeat center/cover;
   
7.   box-shadow: 0 0 8px gray;
   
8.   position: relative;
   
9. }
   
10. </style>
    
11. <div id="mydiv">
    
12.   <css-doodle id="mplayer">
    
13.     :doodle {
    
14.       @grid: 4 / 200px;
    
15.       background: url('https://638183.freep.cn/638183/t23/btn/laba1.png') no-repeat 0px 50px / 100px 100px;
    
16.       cursor: pointer;
    
17.       position: absolute;
    
18.       left: 1000px;
    
19.       top: 280px;
    
20.       --state: running;
    
21.     }
    
22.     :doodle(:hover) { transform: skew(2deg); }
    
23.     position: absolute;
    
24.     @place-cell: 80px 46%;
    
25.     :after {
    
26.       content: @p(♫,♪,♩,♬);
    
27.       color: @p(red,pink,orange,green,blue,white);
    
28.     }
    
29.     animation: fly 1s @r(-2,2)s infinite var(--state);
    
30.     @keyframes fly {
    
31.       from { transform: rotate(0deg) translate(0px); }
    
32.       to { transform: rotate(@r(-60,60)deg) translate(110px); }
    
33.     }
    
34.   </css-doodle>
    
35.   <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1899636809" autoplay="autoplay" loop="loop"></audio>
    
36. </div>
    
37. 
    
38. <script>
    
39. (function() {
    
40.   let scriptEle = document.createElement('script');
    
41.   scriptEle.setAttribute('type','text/javascript');
    
42.   scriptEle.setAttribute('src','https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js');
    
43.   document.head.appendChild(scriptEle);
    
44. 
    
45.   let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
46.   aud.addEventListener('play', mState, false);
    
47.   aud.addEventListener('pause', mState, false);
    
48.   mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    
49. })();
    
50. </script>
    

复制代码

婴宁

十一、《醉美天下》地址：http://qslt.net/forum.php?mod=viewthread&tid=3672，代码如下：

1. <style>
   
2.         #papa { margin: auto; width: 1200px; height: 640px; background: url('https://s1.ax1x.com/2023/07/07/pCcFPOS.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; box-shadow: 3px 3px 20px #000; display: flex; justify-content: center; overflow: hidden; position: relative; z-index: 1; }
   
3.         #mplayer { position: absolute; bottom: 10px; }
   
4.         #btnwrap { fill: lightblue; cursor: pointer; }
   
5.         #btnwrap:hover { fill: lightgreen; }
   
6.         #tmsg { fill: tan; stroke: lightblue; stroke-width: 1px; font: bold 1em sans-serif; }
   
7.         #lrc { position: absolute; top: 10px; font: bold 2.4em sans-serif; color: transparent; background: linear-gradient(-90deg, tomato, tan) 0 0 / 200% 200%; filter: drop-shadow(2px 2px 4px #000); background-clip: text; -webkit-background-clip: text; text-stroke: 1px lightgreen; -webkit-text-stroke: 1px lightblue; }
   
8.         #mpic {position: absolute; left: 0; top: 0; width: 100px;offset-distance: 0;offset-path: path("M0 40 Q500 180, 600 160 T1024 40");animation: move 18s linear infinite;}
   
9.         @keyframes bgMove1 { from { background-position: 0 0; } to { background-position: -100% 0; } }
   
10.         @keyframes bgMove2 { from { background-position: 0 0; } to { background-position: -100% 0; } }
    
11.         @keyframes move { to { offset-distance: 100%;} }
    
12. </style>
    
13. 
    
14. <div id="papa">
    
15.         <img id="mpic" alt="" src="http://qslt.net/static/image/common/lingchong/67.gif" />
    
16.         <div id="lrc">醉 美 天 下</div>
    
17.         <svg id="mplayer" width="120" height="120">
    
18.                 <g id="mama" transform="rotate(-90, 60, 60)" style="cursor: pointer">
    
19.                         <circle id="track" cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke="rgba(255,255,255,0.65)" />
    
20.                         <circle id="prog" cx="60" cy="60" r="50" fill="none" stroke-width="4" stroke="rgba(50,120,40,0.75)" />
    
21.                 </g>
    
22.                 <g id="btnwrap">
    
23.                         <path id="btnplay" d="M 50 50,50 70,70, 60 z"></path>
    
24.                         <path id="btnpause" d="M 52 50,52 70,57 70,57 50,52 50 z M 60 50,60 70,65 70,65 50,60 50 z" style="display:none"></path>
    
25.                         <path d="M 57 50,60 50,60 70,57 70 z" fill="transparent" />
    
26.                 </g>
    
27.                 <path id="curPath" d="M 20 70 Q 60 0 100 70" fill="none" stroke="none"/>
    
28.                 <path id="durPath" d="M 20 55 Q 60 110 100 55" fill="none" stroke="none"/>
    
29.                 <g id="tmsg">
    
30.                         <text x="34" y="0"><textPath id="curMsg" xlink:href="#curPath" dominant-baseline="text-after-edge">00:00</textPath></text>
    
31.                         <text x="29" y="0"><textPath id="durMsg" xlink:href="#durPath" dominant-baseline="text-before-edge">00:00</textPath></text>
    
32.                 </g>
    
33.         </svg>
    
34. </div>
    
35. 
    
36. <script>
    
37. let lrcAr = [];
    
38. 
    
39. let mKey = 0, mFlag = true, aud = new Audio();
    
40. let cc = {
    
41.         x: 1*track.getAttribute('cx'),
    
42.         y: 1*track.getAttribute('cy'),
    
43.         r: 1*track.getAttribute('r'),
    
44.         len: track.getTotalLength(),
    
45. };
    
46. 
    
47. prog.style.strokeDasharray = prog.style.strokeDashoffset =cc.len;
    
48. aud.src = 'https://music.163.com/song/media/outer/url?id=1877656158.mp3';
    
49. aud.autoplay = true;
    
50. aud.loop = true;
    
51. 
    
52. mama.onclick = (e) => {
    
53.         let deg = Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;
    
54.         deg += (e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;
    
55.         aud.currentTime = aud.duration * deg / 360;
    
56. };
    
57. 
    
58. btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
    
59. 
    
60. aud.addEventListener('pause', () => mState());
    
61. aud.addEventListener('play', () => mState());
    
62. aud.addEventListener('seeked', () => calcKey());
    
63. 
    
64. aud.addEventListener('timeupdate', () => {
    
65.         prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration;
    
66.         curMsg.textContent = toMin(aud.currentTime);
    
67.         durMsg.textContent = toMin(aud.duration);
    
68.         for(j=0; j<lrcAr.length; j++) {
    
69.                 if(aud.currentTime >= lrcAr[j][0]) {
    
70.                         if(mKey === j) showLrc(lrcAr[j][2] || 5);
    
71.                         else continue;
    
72.                 }
    
73.         }
    
74. });
    
75. 
    
76. let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.animationPlayState = 'paused') : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.animationPlayState = 'running');
    
77. 
    
78. let showLrc = (time) => {
    
79.         lrc.style.animation = (mFlag ? 'bgMove1 ' : 'bgMove2 ') + time + 's linear forwards';
    
80.         lrc.innerHTML = lrcAr[mKey][1];
    
81.         mKey += 1;
    
82.         mFlag = !mFlag;
    
83. }
    
84. 
    
85. let calcKey = () => {
    
86.         for(j = 0; j < lrcAr.length; j ++) {
    
87.                 if(aud.currentTime <= lrcAr[j][0]) {
    
88.                         mKey = j - 1;
    
89.                         break;
    
90.                 }
    
91.         }
    
92.         if(mKey <0) mKey = 0;
    
93.         if(mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
    
94.         let mtime = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);
    
95.         showLrc(mtime);
    
96. }
    
97. 
    
98. let toMin = (val)  => {
    
99.         if (!val) return '00:00';
    
100.         val = Math.floor(val);
     
101.         let min = parseInt(val / 60), sec = parseFloat(val % 60);
     
102.         if(min < 10) min = '0' + min;
     
103.         if(sec < 10) sec = '0' + sec;
     
104.         return min + ':' + sec;
     
105. }
     
106. </script>

复制代码

十二、《等你千年》地址：http://qslt.net/forum.php?mod=viewthread&tid=3527，代码如下：

1. <style>
   
2. #papa {
   
3.         margin: 20px auto;
   
4.         width: 1200px;
   
5.         height: 650px;
   
6.         background: tan url('https://s1.ax1x.com/2023/08/10/pPeLL2q.jpg') center/cover no-repeat;
   
7.         box-shadow: 0 0 10px gray;
   
8.         display: grid;
   
9.         place-items: center;
   
10. }
    
11. </style>
    
12. 
    
13. <div id="papa">
    
14. 
    
15. <css-doodle id="mplayer">
    
16.         @grid: 1 / 50px;
    
17.         cursor: pointer;
    
18.         background: radial-gradient(yellow, #6DC7D0, #fff);
    
19.         clip-path: @shape( fill-rule: evenodd; split: 00; scale: .6; r: cos(7t)^2 + sin(7t) + .3;);
    
20.         animation: rot 6s infinite linear var(--state);
    
21.         @keyframes rot { to { transform: rotate(360deg); } }
    
22. </css-doodle>
    
23. 
    
24. </div>
    
25. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1855756345" autoplay loop></audio>
    
26. 
    
27. <script>
    
28. (function() {
    
29.         let scriptEle = document.createElement('script');
    
30.         scriptEle.setAttribute('type','text/javascript');
    
31.         scriptEle.setAttribute('src','https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js');
    
32.         document.head.appendChild(scriptEle);
    
33.         let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
34.         aud.addEventListener('play', mState, false);
    
35.         aud.addEventListener('pause', mState, false);
    
36.         mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    
37. })();
    
38. </script>

复制代码

十三、《许你》地址：http://qslt.net/forum.php?mod=viewthread&tid=3452，代码如下：

1. <style>
   
2. #papa {
   
3.         margin: -80px 0 0 calc(50% - 593px);
   
4.         display: grid;
   
5.         place-items: center;
   
6.         width: 1200px;
   
7.         height: 660px;
   
8.         background: gray url('https://s1.ax1x.com/2023/08/12/pPups3D.jpg') no-repeat center/cover;
   
9.         box-shadow: 8px 4px 20px hsla(0,0%,0%,.65);
   
10.         user-select: none;
    
11.         position: relative;
    
12.         z-index: 1;
    
13.         animation: flash 10s infinite alternate;
    
14. }
    
15. @keyframes flash { from {filter: brightness(60%); } to {filter: brightness(140%); } }
    
16. </style>
    
17. 
    
18. <div id="papa"></div>
    
19. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2046097236.mp3" loop autoplay></audio>
    
20. 
    
21. <script >
    
22. (function() {
    
23.         (function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 20px; left: 50%; transform: translateX(-50%);',btn_txt: '\u2638',playerCode: `<style>#mplayer {position: absolute;grid-template-columns: auto auto auto;gap: 8px;display: grid;place-items: center;color: var(--color);font: normal 16px sans-serif;z-index: 999;--ww: 260px;--color: hsl(0, 100%, 100%);--btn_size: 35px;--track: hsla(90,100%,95%,.65);--prog: linear-gradient(90deg,hsla(90,30%,50%,.55),hsla(0,70%,50%,.65),hsla(90,30%,50%,.75));}#btnplay {--state: paused;margin-right: -4px;font: bold var(--btn_size) / var(--btn_size) serif;text-align: center;cursor: pointer;animation: rot 4s infinite linear;animation-play-state: var(--state);}#prog {--xx: 0px;width: var(--ww);height: 10px;border-radius: 8px;background: var(--track);position: relative;cursor: pointer;}#prog::before {position: absolute;content: '';width: var(--xx);height: 100%;border-radius: 8px;background: var(--prog);}#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(80, 70%, 50%, .6), hsla(0, 100%, 50%, .75));position: absolute;font: bold 2.4em sans-serif;color: hsl(0, 10%, 90%);white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));}#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}@keyframes cover1 { from { width: 0; } to { width: 100%; } }@keyframes cover2 { from { width: 0; } to { width: 100%; } }@keyframes rot { to { transform: rotate(1turn); } }</style><div id="lrc" data-lrc="HCPlayer">HCPlayer</div><div id="mplayer"><span id="btnplay"></span><span id="prog"></span><span id="tmsg">00:00 | 00:00</span></div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;btnplay.innerHTML = data.btn_txt;let mKey = 0, mFlag = true;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;aud.addEventListener('timeupdate', () => {let prg = aud.currentTime * prog.offsetWidth / aud.duration < 6 ? 6 : aud.currentTime * prog.offsetWidth / aud.duration;tmsg.innerText = `${toMin(aud.currentTime)} | ${toMin(aud.duration)}`;prog.style.setProperty('--xx', prg + 'px');for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr[j][0]) {cKey = j;if (mKey === j) showLrc(data.lrcAr[j][2]);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),btnplay.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state','running'),btnplay.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr[mKey][1];lrc.dataset.lrc = data.lrcAr[mKey][1].replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr[j][0]) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr[mKey][2] - (aud.currentTime - data.lrcAr[mKey][0]);showLrc(time);};let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;}};mkPlayer.HCPlayer = playCode;})(this);
    
24.         (function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow; background: black; border: 2px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
    
25.         let averAdd = 0, offset = 0;
    
26.          let geci = `[00:00.000]许你（婴宁）\n[03:53.855]`;
    
27. 
    
28. 
    
29.         let lrcTime = (ar) => {let tmpAr = [];for(j = 0; j <ar.length - 1; j ++) {if(j !== ar.length - 1) tmpAr[j] = parseFloat((ar[j+1][0] - ar[j][0]).toFixed(1));}let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item,key) => {ar[key][2] = item > aver ? aver : item;});return ar;};
    
30.         let getLrcAr = (text) => {let lrcAr = [];let calcRule = [60,1,0.001];for(x of text.split('\n')) {let ar = [];let re = /\d+[\.:]\d+([\.:]\d+)?/g;let geci = x.replace(re,'');if(geci) {geci = geci.replace(/[\[\]\'"\t,]s?/g,'');let time = x.match(re);if(time != null) {for(y of time) {let tmp = y.match(/\d+/g);let sec = 0;for(z in tmp) sec += tmp[z] * calcRule[z];ar[0] = [parseFloat(sec.toFixed(2)) + offset, geci];lrcAr.push(ar[0]); }}}}lrcAr.sort((a,b)=> a[0] - b[0]);return(lrcTime(lrcAr));}
    
31. 
    
32.         HCPlayer({
    
33.                 lrcAr: getLrcAr(geci),
    
34.                 lrc_css: '--bg: linear-gradient(hsla(90,80%,50%,.35),hsla(100,70%,45%,.6)); top: 20px;',
    
35.                 player_css: '--ww: 180px; bottom: 10px;',
    
36.                 btn_txt: '\u2623',
    
37.         });
    
38. 
    
39.         FS({
    
40.                 pa: papa,
    
41.                 set: 'backgroun: transparent; color: snow; border: 2px dotted snow; left: 20px; top: 20px;',
    
42.         });
    
43. 
    
44.         aud.onerror = () => {
    
45.                 if(aud.error.code === 4) aud.src = '';
    
46.         }
    
47. })();
    
48. </script>
    

复制代码

婴宁

十四、《猫咪》地址：http://qslt.net/forum.php?mod=viewthread&tid=3769，代码如下：

1. <style>
   
2. #papa { margin: auto; width: 1200px; height: 660px; background: url('https://s1.ax1x.com/2023/08/12/pPuC1lF.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; user-select: none; z-index: 1; --opt: .25;  }
   
3. #mplayer { position: absolute; bottom: 20px; display: grid; grid-template-columns: auto auto auto; place-items: center; gap: 6px; user-select: none; }
   
4. #btnplay { width: 40px; height: 40px; text-align: center; font: normal 40px/40px sans-serif; color: snow; cursor: pointer; animation: rot linear 4s infinite; }
   
5. #prog { --ww: 0px; width: 300px; height: 12px; border: 1px solid green; border-radius: 6px; background: snow; opacity: .65; position: relative; }
   
6. #prog::before { position: absolute; content: ''; width: var(--ww); height: 12px; border-radius: 6px; background: snow linear-gradient(90deg, orange, green); opacity: .75; }
   
7. #audtime { font: normal 14px sans-serif; color: snow; }
   
8. #lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; top: 30px; font: bold 2.4em sans-serif; color: hsl(0,10%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,0%,0%,.95)); }
   
9. #lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(0,50%,20%,.45),hsla(140,100%,50%,.75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
   
10. #fish { offset-path: path('M310 195a93.5 62 0 1 0 187 0a93.5 62 0 1 0 -187 0z'); offset-distance: 100%; animation: swim 50s infinite; }
    
11. @keyframes cover1 { from { width: 0; } to { width: 100%; } }
    
12. @keyframes cover2 { from { width: 0; } to { width: 100%; } }
    
13. @keyframes rot { to { transform: rotate(1turn); } }
    
14. @keyframes swim { to { offset-distance: 0%; } }
    
15. </style>
    
16. 
    
17. <div id="papa">
    
18.         <img id="fish" src="http://qslt.net/data/attachment/forum/202308/11/120506zy8dyltotmknyaiy.gif" alt="">
    
19.         <div id="lrc" data-lrc="猫咪"></div>
    
20.         <div id="mplayer">
    
21.                 <span id="btnplay">❁</span>
    
22.                 <span id="prog"></span>
    
23.                 <span id="audtime">00:00 | 00:00</span>
    
24.         </div>
    
25. </div>
    
26. 
    
27. 
    
28. 
    

复制代码

十四、《闲云野鹤》地址：http://qslt.net/forum.php?mod=viewthread&tid=3768，代码如下：

1. <style>
   
2. #papa { position: relative; left: -214px; width: 1200px; height: 640px; background: teal url('https://s1.ax1x.com/2023/08/12/pPuS3yd.jpg') no-repeat center/cover; display: grid; grid-template-areas: 'head head head' 'mid mid mid' 'foot foot foot'; box-shadow: 3px 3px 20px #000; user-select: none; z-index: 1; }
   
3. #papa > div { position: relative; display: grid; }
   
4. #pa_top { grid-area: head; place-items: center start; }
   
5. #pa_mid { grid-area: mid; place-items: start start; }
   
6. #pa_foot { grid-area: foot; place-items: center; }
   
7. #btnplay { --dur: 6s; position: absolute; bottom: 20px; width: 40px; height: 40px; font: bold 40px/40px serif; text-align: center; color: purple; cursor: pointer; animation: rot linear var(--dur) infinite; }
   
8. #lrc { --motion: cover1; --tt: 1s; --state: paused; position: absolute; font: bold 2.4em sans-serif; color: hsl(240,100%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,100%,0%,.85)); }
   
9. #lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(240,100%,50%,.75),hsla(0,100%,50%,.65)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
   
10. @keyframes cover1 { from { width: 0; } to { width: 100%; } }
    
11. @keyframes cover2 { from { width: 0; } to { width: 100%; } }
    
12. @keyframes rot { to { transform: rotate(360deg); } }
    
13. </style>
    
14. 
    
15. <div id="papa">
    
16.         <div id="pa_top">
    
17.                 <img src="https://638183.freep.cn/638183/t22/hl/fwhe0.gif" alt="" style="position: absolute; width: 564px;" />
    
18.         </div>
    
19.       
    
20.         <div id="pa_foot">
    
21.                 <span id="lrc" data-lrc="">闲 云 野 鹤</span>
    
22.                 <span id="btnplay">☯</span>
    
23.         </div>
    
24. </div>
    
25. 
    
26. <script>
    
27. (function() {
    
28.         let mKey = 0, mFlag = true, aud = new Audio();
    
29.         let lrcAr = [];
    
30.         aud.src = 'https://music.163.com/song/media/outer/url?id=2029711808.mp3';
    
31.         aud.loop = false;
    
32.         aud.autoplay = true;
    
33.         papa.oncontextmenu = () => false;
    
34.         btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
    
35.         aud.addEventListener('pause', () => mState());
    
36.         aud.addEventListener('play', () => mState());
    
37.         aud.addEventListener('ended', () => { mKey = 0; aud.play(); });
    
38.         aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr[j][0]) {if (mKey === j) showLrc(lrcAr[j][2]);else continue;}}});
    
39.         let mState = () => aud.paused ? (btnplay.style.animationPlayState = 'paused', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.animationPlayState = 'running', lrc.style.setProperty('--state', 'running'));
    
40.         let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr[mKey][1];lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
    
41. })();
    
42. </script>
    

复制代码

十五、《宠物小精灵》地址：http://qslt.net/forum.php?mod=viewthread&tid=3826，代码如下：

1. <style>
   
2. #papa { left: -214px; width: 1200px; height: 680px; display: grid; place-items: center; background: gray url('https://s1.ax1x.com/2023/08/12/pPuS3yd.jpg'); box-shadow: 3px 3px 20px #000; perspective: 3000px; font: bold 1.2em / 30px sans-serif;  text-shadow: 1px 1px 1px black; color: snow; position: relative; }
   
3. #msgbox {position: absolute; bottom: 25px; }
   
4. #mama { position: absolute; width: 200px; height: 200px; animation: rot 20s linear infinite; transform-style: preserve-3d; }
   
5. #mama:hover { animation-play-state: paused; cursor: pointer; }
   
6. .pics { position: absolute; width: 100%; height: 100%; transition: all .5s; }
   
7. .pics:hover { box-shadow: 14px 14px 20px #000; top: 10px; filter: grayscale(100%); }
   
8. #mama img:nth-child(1) { transform: rotateY(0deg) translateZ(200px); }
   
9. #mama img:nth-child(2) { transform: rotateY(60deg) translateZ(200px); }
   
10. #mama img:nth-child(3) { transform: rotateY(120deg) translateZ(400px); }
    
11. #mama img:nth-child(4) { transform: rotateY(180deg) translateZ(400px); }
    
12. #mama img:nth-child(5) { transform: rotateY(240deg) translateZ(400px); }
    
13. #mama img:nth-child(6) { transform: rotateY(300deg) translateZ(400px); }
    
14. #playbox { position: absolute; left: 10px; top: 10px; padding: 10px; display: flex; gap: 8px; z-index: 100; }
    
15. #btnplay { width: 30px; height: 30px; border-radius: 50%; outline: none; border: none; }
    
16. #btnplay:hover { background: #aaa; color: #ff0000; cursor: pointer; }
    
17. @keyframes rot { to { transform: rotateY(360deg); } }
    
18. </style>
    
19. 
    
20. <div id="papa">
    
21.         <div id="mama">
    
22.                 <img class="pics" src="https://s1.ax1x.com/2023/07/20/pC7LE9J.jpg" alt="" />
    
23.                 <img class="pics" src="https://s1.ax1x.com/2023/07/20/pC7LiAU.jpg" alt="" />
    
24.                 <img class="pics" src="https://s1.ax1x.com/2023/05/02/p9GRYDg.jpg" alt="" />
    
25.                 <img class="pics" src="https://s1.ax1x.com/2023/03/02/ppFmjyj.jpg" alt="" />
    
26.                 <img class="pics" src="https://s1.ax1x.com/2023/03/09/ppnGfrd.jpg" alt="" />
    
27.                 <img class="pics" src="https://s1.ax1x.com/2023/04/01/ppWVQtH.jpg" alt="" />
    
28.         </div>
    
29.         <div id="msgbox"></div>
    
30.         <div id="playbox"><input id="btnplay" type="button" value=">" /><span>纯音乐</span></div>
    
31. </div>
    
32. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1885581139.mp3" autoplay="autoplay" loop="loop"></audio>
    
33. 
    
34. <script>
    
35. btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
    
36. aud.addEventListener('playing', () => btnplay.value = '||');
    
37. aud.addEventListener('pause', () => btnplay.value = '>');
    
38. </script>
    

复制代码

十六、《墨舞流年》地址：http://qslt.net/forum.php?mod=viewthread&tid=3767，代码如下：

1. <style>
   
2. #papa { margin: auto; width: 1024px; height: 640px; background: url('https://s1.ax1x.com/2023/08/14/pPKLCD0.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; user-select: none; z-index: 1; --opt: .15;  }
   
3. #papa::before { position: absolute; content: ''; width: 100%; height: 50%; background: url('https://638183.freep.cn/638183/t22/webp/126.gif') repeat; opacity: var(--opt); }
   
4. #mplayer { position: absolute; bottom: 20px; display: grid; grid-template-columns: auto auto; place-items: center; z-index: 9; }
   
5. #btnplay { width: 30px; height: 30px; border-radius: 50%; background: tan linear-gradient(hsla(120,100%,90%,.6), hsla(0,100%,50%,.6)); cursor: pointer; animation: rot linear 3s infinite; }
   
6. #lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; bottom: 60px; font: bold 2.4em sans-serif; color: hsl(0,10%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,100%,0%,.85)); }
   
7. #lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(60,100%,50%,.75),hsla(120,100%,50%,.75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
   
8. @keyframes cover1 { from { width: 0; } to { width: 100%; } }
   
9. @keyframes cover2 { from { width: 0; } to { width: 100%; } }
   
10. @keyframes rot { to { transform: rotate(1turn); } }
    
11. </style>
    
12. 
    
13. <div id="papa">
    
14.         <div id="lrc" data-lrc="歌曲"></div>
    
15.         <div id="mplayer">
    
16.                 <span id="btnplay"></span>
    
17.                 <svg id="iplay" width="300" height="20">
    
18.                         <line id="track" x1="10" y1="10" x2="190" y2="10" stroke="hsla(60,40%,80%,0.5)" stroke-width="10" stroke-linecap="round" />
    
19.                         <line id="prog" x1="10" y1="10" x2="190" y2="10" stroke="hsla(0,100%,50%,0.5)" stroke-width="10" stroke-dasharray="180" stroke-dashoffset="180" stroke-linecap="round" />
    
20.                         <text id="audtime" x="200" y="15" font-size="14" fill="hsl(0,0%,100%)">00:00 | 00:00</text>
    
21.                 </svg>
    
22.         </div>
    
23. </div>
    
24. 
    
25. <script>
    
26. (function() {
    
27.         let len = track.getTotalLength(), aud = new Audio(), mKey = 0, mFlag = true;
    
28.         aud.src = 'https://music.163.com/song/media/outer/url?id=1905931032.mp3';
    
29.         let lrcAr = [];
    
30.         aud.loop = true;
    
31.         aud.autoplay = true;
    
32.         btnplay.style.animationPlayState = aud.paused ? 'paused' : 'running';
    
33.         btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
    
34.         aud.addEventListener('seeked', () => calcKey());
    
35.         prog.onclick = track.onclick = (e) => aud.currentTime = aud.duration * (e.offsetX - 10) / len;
    
36.         aud.addEventListener('pause', () =>mState());
    
37.         aud.addEventListener('play', () =>mState());
    
38.         aud.addEventListener('timeupdate', () => {prog.style.strokeDashoffset = len - aud.currentTime * len / aud.duration;audtime.textContent = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);for(j=0; j<lrcAr.length; j++) {if(aud.currentTime >= lrcAr[j][0]) {cKey = j;if(mKey === j) showLrc(lrcAr[j][2]);else continue;}}});
    
39.         let calcKey = () => {for(j = 0; j < lrcAr.length; j ++) {if(aud.currentTime <= lrcAr[j][0]) {mKey = j - 1;break;}}if(mKey <0) mKey = 0;if(mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);showLrc(time);};
    
40.         let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr[mKey][1];lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
    
41.         let mState = () => aud.paused ? (btnplay.style.animationPlayState = 'paused',lrc.style.setProperty('--state', 'paused'),papa.style.setProperty('--opt','0')) : (btnplay.style.animationPlayState = 'running', lrc.style.setProperty('--state', 'running'),papa.style.setProperty('--opt','.15'));
    
42.         let toMin = (val)  => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if(min < 10) min = '0' + min;if(sec < 10) sec = '0' + sec;return min + ':' + sec;}
    
43. })();
    
44. </script>

复制代码

十七、《烟花易冷》地址：http://qslt.net/forum.php?mod=viewthread&tid=3872，代码如下：

1. <style>
   
2. #papa { center; width: 1200px; height: 640px; background: gray url('https://scpic.chinaz.net/files/default/imgs/2023-07-03/7e4f51486369330f.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
   
3. #canv { position: absolute; }
   
4. #disc { position: absolute; width: 40px; height: 40px; left: 10px; bottom: 10px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 1px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 4s linear infinite; }
   
5. #lrcbox { position: absolute; left: 160px; bottom: 10px;  font: bold 22px / 40px sans-serif; color: #859670; text-shadow: 2px 2px 4px #222; }
   
6. @keyframes rot { to { transform: rotate(360deg); } }
   
7. </style>
   
8. 
   
9. <div id="papa">
   
10.         <span id="lrcbox">纯音乐 - 烟花易冷</span>
    
11.         <canvas id="canv"></canvas>
    
12.         <span id="disc"></span>
    
13. </div>
    
14. 
    
15. <script>
    
16. (function() {
    
17.         let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
    
18.         let ctx = canv.getContext('2d');
    
19.         let w = canv.width = papa.offsetWidth, h = canv.height = papa.offsetHeight, particles = [], idx = 0, aud = new Audio();
    
20.         
    
21.         aud.src = 'https://music.163.com/song/media/outer/url?id=1942250548.mp3';
    
22.         aud.loop = true;
    
23.         aud.autoplay = true;
    
24.         
    
25.         disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
    
26.         disc.onclick = () => aud.paused ? aud.play() : aud.pause();
    
27.         aud.addEventListener('playing',()  => disc.style.animationPlayState = 'running');
    
28.         aud.addEventListener('pause',()  => disc.style.animationPlayState = 'paused');
    
29. 
    
30.         canv.onclick = function(event) {
    
31.                 let x = event.offsetX || event.layerX, y = event.offsetY || event.layerY;
    
32.                 createParticle(x, y);
    
33.         }
    
34. 
    
35.         function createParticle(x, y) {
    
36.                 let count = 100, radius = 10;
    
37.                 for (let j = 0; j < count; j ++) {
    
38.                         let p = {};
    
39.                         let angle = 360 / count * j, radian = Math.PI / 180 * angle;
    
40.                         p.radius = radius;
    
41.                         p.startX = x;
    
42.                         p.startY = y;
    
43.                         p.radian = radian;
    
44.                         p.rgb = `${num(0,255)},${num(0,255)},${num(0,255)},`;
    
45.                         p.alpha = (Math.floor(Math.random() * 101)) / 100;
    
46.                         p.speed = (Math.random() * 5) + 0.4;
    
47.                         p.radius = p.speed;
    
48.                         particles.push(p);
    
49.                 }
    
50.         }
    
51. 
    
52.         function drawParticle() {
    
53.                 ctx.fillStyle = 'transparent';
    
54.                 ctx.fillRect(0, 0, w, h);
    
55.                 for (let j = 0; j < particles.length; j++) {
    
56.                         let p = particles[j];
    
57.                         let resultX = Math.cos(p.radian) * p.radius;
    
58.                         let resultY = Math.sin(p.radian) * p.radius + 0.4;
    
59.                         p.startX += resultX;
    
60.                         p.startY += resultY;
    
61.                         p.radius *= 1 - p.speed / 100;
    
62.                         p.alpha -= 0.005;
    
63.                         if (p.alpha <= 0) {
    
64.                                 particles.splice(j, 1);
    
65.                                 continue;
    
66.                         }
    
67.                         ctx.beginPath();
    
68.                         ctx.arc(p.startX, p.startY, 2, 0, 360, false);
    
69.                         ctx.closePath();
    
70.                         ctx.fillStyle = 'rgba(' + p.rgb + p.alpha + ')';
    
71.                         ctx.fill();
    
72.                 }
    
73.         }
    
74. 
    
75.         function fade() {
    
76.                 ctx.globalCompositeOperation = 'destination-out';
    
77.                 ctx.fillStyle = 'rgba(0, 0, 0, .1)';
    
78.                 ctx.fillRect(0, 0, w, h);
    
79.                  ctx.globalCompositeOperation = 'lighter';
    
80.         }
    
81. 
    
82.         function render() {
    
83.                 idx ++;
    
84.                 fade();
    
85.                 drawParticle();
    
86.                 if(idx > 20) {
    
87.                         createParticle(Math.random() * w, Math.random() * h/2);
    
88.                         idx = 0;
    
89.                 }
    
90.                 requestAnimationFrame(render);
    
91.         }
    
92. 
    
93.         render();
    
94. })();
    
95. </script>
    

复制代码

十八、《遗失的风景》地址：http://qslt.net/forum.php?mod=viewthread&tid=3877，代码如下：

1. <style>
   
2. #papa {
   
3.         margin: 80px 0 0 calc(50% - 593px);
   
4.         width: 1200px;
   
5.         height: 840px;
   
6.         background: gray;
   
7.         box-shadow: 3px 3px 20px #000;
   
8.         position: relative;
   
9.         z-index: 1;
   
10. }
    
11. #papa::after {
    
12.         position: absolute;
    
13.         content: '';
    
14.         right: 0;
    
15.         top: 0;
    
16.         width: 130px;
    
17.         height: 80px;
    
18.         background: linear-gradient(40deg, #eee 40%, #B7A4A4 50%);
    
19.         filter: drop-shadow(0px 0px 8px #444);
    
20. }
    
21. #canv {
    
22.         position: absolute;
    
23.         display: block;
    
24.         opacity: 1;
    
25.         animation: opa 20s infinite alternate linear;
    
26. }
    
27. #vid { display: none; }
    
28. #mplayer {
    
29.         position: absolute;
    
30.         top: 10px;
    
31.         right: 10px;
    
32.         width: 30px;
    
33.         height: 30px;
    
34.         border: 2px solid var(--bd);
    
35.         border-radius: 50%;
    
36.         box-shadow: 0 0 10px var(--sd);
    
37.         transition: .7s;
    
38.         cursor: pointer;
    
39.         display: grid;
    
40.         place-items: center;
    
41.         z-index: 2;
    
42.         --play: 1; --pause: 0; --bd: #435D03; --sd: white;
    
43. }
    
44. #mplayer::before, #mplayer::after {
    
45.         position: absolute;
    
46.         content: '';
    
47.         border-style: solid;
    
48.         border-color: var(--bd);
    
49.         transition: .4s;
    
50. }
    
51. #mplayer::before {
    
52.         width: 0;
    
53.         height: 0;
    
54.         left: 100px;
    
55.         border-width: 10px 12px;
    
56.         border-color: transparent transparent transparent var(--bd);
    
57.         opacity: var(--play);
    
58. }
    
59. #mplayer::after {
    
60.         width: 2px;
    
61.         height: 16px;
    
62.         border-width: 0 4px 0 4px;
    
63.         opacity: var(--pause);
    
64. }
    
65. #mplayer:hover { box-shadow: 0 0 10px var(--sd), 0 0 10px var(--sd) inset; }
    
66. </style>
    
67. 
    
68. <div id="papa">
    
69.         <canvas id="canv"></canvas>
    
70.         <div id="mplayer"></div>  <img src="http://qslt.net/data/attachment/forum/202308/15/174129jtrbq3qzt2rqzzct.gif" alt="" style="position: absolute; top:420px;width: 564px;" />
    
71. </div>
    
72. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1366016806.mp3" loop autoplay></audio>
    
73. <video id="vid" src="" poster="https://s1.ax1x.com/2023/08/11/pPnGzqA.jpg" loop muted></video>
    
74. 
    
75. <script>
    
76. (function () {
    
77.         let ctx = canv.getContext('2d'), pic = new Image();
    
78.         let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
    
79.         pic.src = vid.poster;
    
80.         pic.onload = () => ctx.drawImage(pic,0,0,ww,hh);
    
81.         let mState = () => aud.paused ? vid.pause() : vid.play();
    
82.         let loop = () => {ctx.drawImage(vid, 0, 0, ww, hh);if(!vid.paused) {requestAnimationFrame(loop);return;}};
    
83.         vid.addEventListener('play', loop, false);
    
84.         aud.addEventListener('play', () => mState());
    
85.         aud.addEventListener('pause', () => mState());
    
86.         mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
    
87. })();
    
88. </script>
    

复制代码

婴宁

十九、《锁心》地址：http://qslt.net/forum.php?mod=viewthread&tid=3905，代码如下：

1. <style>
   
2. :root { --state: running; --prg: 0%; --delay: 0s; }
   
3. .mydiv { margin: 0 0 0 calc(50% - 621px); width: 1080px; height: 674px; background: #333 url('https://s1.ax1x.com/2023/08/15/pPQMRKJ.jpg'); box-shadow: 0 0 8px #000; overflow: hidden; z-index: 1; display: grid; place-items: center; position: relative; }
   
4. .heart { position: absolute; font: normal 30px sans-serif; animation: up 5s var(--delay) infinite var(--state); }
   
5. .heart:nth-of-type(2) { --delay: -2.5s; }
   
6. #mplayer { position: absolute; bottom: 10px; width: 200px; height: 40px; background: linear-gradient(to right,red var(--prg),#eee 0) repeat-x 0 50% / 100% 2px; }
   
7. #mplayer::before, #mplayer::after { position: absolute; top: 28%; font-size: 14px; }
   
8. #mplayer::before { content: attr(data-cu); left: -50px; }
   
9. #mplayer::after { content: attr(data-du); right: -50px; }
   
10. #btnplay { position: absolute; left: calc(var(--prg) - 15px); bottom: 0; font: normal 30px sans-serif; cursor: pointer; animation: swing .3s infinite linear var(--state); }
    
11. @keyframes swing { from { transform: rotate(90deg) skew(-5deg); } to { transform: rotate(90deg) skew(5deg); } }
    
12. @keyframes up { 0% { opacity: 0; transform: rotate(0deg) translateY(0px); } 75% { opacity: 1; transform: rotate(-10deg) translateY(-300px); } 100% { opacity: 0; transform: rotate(-60deg) translateY(0px); } }
    
13. </style>
    
14. 
    
15. <div class="mydiv">
    
16.     <span class="heart">&#128151;</span>
    
17.     <span class="heart">&#128147;</span>
    
18.     <div id="mplayer" data-cu="00:00" data-du="00:00" title="调节进度">
    
19.             <div id="btnplay" title="暂停/播放">&#128030;</div>
    
20.     </div>
    
21.     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=158472" loop autoplay></audio>
    
22. </div>
    
23. 
    
24. <script>
    
25. (function() {
    
26.     let root = document.querySelector(':root');
    
27.     let toMin = (val)  => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if(min < 10) min = '0' + min;if(sec < 10) sec = '0' + sec;return min + ':' + sec;}
    
28.     let mState = () => root.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
29.     aud.addEventListener('pause', mState, false);
    
30.     aud.addEventListener('play', mState, false);
    
31.     aud.addEventListener('timeupdate', () => { root.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%'); mplayer.dataset.cu = toMin(aud.currentTime); mplayer.dataset.du = toMin(aud.duration); });
    
32.     btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
    
33.     mplayer.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / mplayer.offsetWidth;
    
34. })();
    
35. </script>

复制代码

二十、《神秘园》地址：http://qslt.net/forum.php?mod=viewthread&tid=3881，代码如下：

1. <style>
   
2. .mydiv { margin: 0 0 0 calc(50% - 593px); display: grid; place-items: center; width: 1200px; height: 740px; background: lightblue url('https://s1.ax1x.com/2023/08/15/pPQlWA1.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; user-select: none; overflow: hidden; position: relative; z-index: 1; --state: running; }
   
3. .mydiv::before,.mydiv::after { position: absolute; left: 0px; top: 0px; content: url('http://qslt.net/data/attachment/forum/202308/15/184613fkvp8zn8djtttnrj.gif'); offset-path: path('M-20,500 L130,440 L220,550 L70,440 L470,300 L520,590 L600,520 L890,430 L980,500'); animation: move 160s var(--delay) infinite var(--state); --delay: 0s; }
   
4. .mydiv::after { --delay: -80.3s; }
   
5. @keyframes move { from {offset-distance: 0%; } to { offset-distance: 60%; } }
   
6. </style>
   
7. 
   
8. <div class="mydiv"></div>
   
9. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2065995408.mp3" loop autoplay></audio>
   
10. 
    
11. <script >
    
12. let script = document.createElement('script');
    
13. script.src = 'https://638183.freep.cn/638183/web/api/pinpuz_lrc.js';
    
14. document.head.appendChild(script);
    
15. 
    
16. (function() {
    
17.     let lrcAr = [];
    
18. 
    
19.    window.onload = () => {
    
20.         ({
    
21.             papa: `.mydiv`,
    
22.             lrcAr: lrcAr,
    
23.             lrc_css: `
    
24.                 top: 15px;
    
25.                 color: snow;
    
26.             `,
    
27.             player_css: `
    
28.                 color: snow;
    
29.                 top: 120px;
    
30.                 --len: 2px;
    
31.             `,
    
32.             pinpu_num: 60,
    
33.         });
    
34.    }
    
35. })();
    
36. </script>

复制代码

二一、《生命的悸动》地址：http://qslt.net/forum.php?mod=viewthread&tid=3876，代码如下：

1. <style>
   
2. #papa { margin: auto; width: 1200px; height: 760px; background: url('https://s1.ax1x.com/2023/08/11/pPnGH56.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; user-select: none; z-index: 1; --opt: .25;  }
   
3. #mplayer { position: absolute; bottom: 20px; display: grid; grid-template-columns: auto auto auto; place-items: center; gap: 6px; user-select: none; }
   
4. #btnplay { width: 40px; height: 40px; text-align: center; font: normal 40px/40px sans-serif; color: snow; cursor: pointer; animation: rot linear 4s infinite; }
   
5. #prog { --ww: 0px; width: 300px; height: 12px; border: 1px solid green; border-radius: 6px; background: snow; opacity: .65; position: relative; }
   
6. #prog::before { position: absolute; content: ''; width: var(--ww); height: 12px; border-radius: 6px; background: snow linear-gradient(90deg, orange, green); opacity: .75; }
   
7. #audtime { font: normal 14px sans-serif; color: snow; }
   
8. #lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; top: 30px; font: bold 2.4em sans-serif; color: hsl(0,10%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,0%,0%,.95)); }
   
9. #lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(0,50%,20%,.45),hsla(140,100%,50%,.75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
   
10. #fish { offset-path: path('M310 195a93.5 62 0 1 0 187 0a93.5 62 0 1 0 -187 0z'); offset-distance: 100%; animation: swim 50s infinite; }
    
11. @keyframes cover1 { from { width: 0; } to { width: 100%; } }
    
12. @keyframes cover2 { from { width: 0; } to { width: 100%; } }
    
13. @keyframes rot { to { transform: rotate(1turn); } }
    
14. @keyframes swim { to { offset-distance: 0%; } }
    
15. </style>
    
16. 
    
17. <div id="papa">
    
18.         <img id="fish" src="http://qslt.net/data/attachment/forum/202308/11/160126sw6t6wj2j61te68t.gif" alt="0" />
    
19.         <div id="lrc" data-lrc="江南"></div>
    
20.         <div id="mplayer">
    
21.                 <span id="btnplay">❁</span>
    
22.                 <span id="prog"></span>
    
23.                 <span id="audtime">00:00 | 00:00</span>
    
24.         </div>
    
25. </div>
    
26. <script>
    
27. (function() {
    
28.         let aud = new Audio(), mKey = 0, mFlag = true;
    
29.         let lrcAr = [];
    
30.         aud.src = 'https://music.163.com/song/media/outer/url?id=139730.mp3';
    
31.         aud.loop = true;
    
32.         aud.autoplay = true;
    
33.         if(aud.paused) btnplay.style.animationPlayState = 'paused';
    
34.         btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
    
35.         prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
    
36.         aud.addEventListener('seeked', () => calcKey());
    
37.         aud.addEventListener('pause', () =>mState());
    
38.         aud.addEventListener('play', () =>mState());
    
39.         aud.addEventListener('timeupdate', () => {let prg = aud.currentTime * prog.offsetWidth / aud.duration < 6 ? 6 : aud.currentTime * prog.offsetWidth / aud.duration;prog.style.setProperty('--ww', prg + 'px');audtime.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);for(j=0; j<lrcAr.length; j++) {if(aud.currentTime >= lrcAr[j][0]) {cKey = j;if(mKey === j) showLrc(lrcAr[j][2]);else continue;}}});
    
40.         let calcKey = () => {for(j = 0; j < lrcAr.length; j ++) {if(aud.currentTime <= lrcAr[j][0]) {mKey = j - 1;break;}}if(mKey <0) mKey = 0;if(mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);showLrc(time);};
    
41.         let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr[mKey][1];lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
    
42.         let mState = () => aud.paused ? (btnplay.style.animationPlayState='paused',lrc.style.setProperty('--state', 'paused'),papa.style.setProperty('--opt','0')) : (btnplay.style.animationPlayState='running', lrc.style.setProperty('--state', 'running'),papa.style.setProperty('--opt','.25'));
    
43.         let toMin = (val)  => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if(min < 10) min = '0' + min;if(sec < 10) sec = '0' + sec;return min + ':' + sec;}
    
44. })();
    
45. </script>

复制代码

二二、《鸿雁》地址：http://qslt.net/forum.php?mod=viewthread&tid=3975，代码如下：

1. <style>
   
2. outer-box {
   
3.         margin: 0 0 0 calc(50% - 531px);
   
4.         position: relative;
   
5.         display: block;
   
6.         width: 1200px;
   
7.         height: 798px;
   
8.         background: url('https://s1.ax1x.com/2023/08/18/pP1Lk8O.jpg');
   
9.         z-index: 1;
   
10.         --state: paused;
    
11. }
    
12. css-doodle {
    
13.         position: absolute;
    
14. }
    
15. </style>
    
16. 
    
17. <outer-box id="papa">
    
18.         <css-doodle grid="1x6" id="mplayer">
    
19.                 :doodle {
    
20.                         @size: 100%;
    
21.                         box-shadow: 20px auto;
    
22.                         --ww: 300px;
    
23.                         --prog: 0;
    
24.                         --tt1: '00:00';
    
25.                         
    
26.                         --xplace: 50%;
    
27.                         --yplace: 98%;
    
28.                         --color: snow;
    
29.                 }
    
30.                 position: absolute;
    
31.                 @nth(1) {
    
32.                         @size: var(--ww) 2px;
    
33.                         @place: var(--xplace) var(--yplace);
    
34.                         background: silver;
    
35.                         :before, :after { content: ''; }
    
36.                         :before {
    
37.                                 position: absolute;
    
38.                                 left: 0;
    
39.                                 width: var(--prog);
    
40.                                 height: 100%;
    
41.                                 background: var(--color);
    
42.                         }
    
43.                         :after {
    
44.                                 width: 100%;
    
45.                                 height: 10px;
    
46.                                 cursor: pointer;
    
47.                         }
    
48.                 }
    
49.                 @nth(2) {
    
50.                         @size: var(--ww) 20px;
    
51.                         @place: var(--xplace) calc(var(--yplace) - 20px);
    
52.                         :before, :after{
    
53.                                 position: absolute;
    
54.                                 width: 100%;
    
55.                                 height: 100%;
    
56.                                 color: var(--color);
    
57.                         }
    
58.                         :before { content: var(--tt1); }
    
59.                         :after { content: var(--tt2); text-align: right; }
    
60.                 }
    
61.                 @nth(3) {
    
62.                         @size: 60px;
    
63.                         @place: var(--xplace) calc(var(--yplace) - 36px);
    
64.                         cursor: pointer;
    
65.                         animation: rot 6s infinite linear var(--state);
    
66.                         :after {
    
67.                                 content: '';
    
68.                                 @size: inherit;
    
69.                                 @shape: clover 4;
    
70.                                 background: var(--color);
    
71.                         }
    
72.                 }
    
73.                 @match(i ≥ 4) {
    
74.                         @size: 80px 48px;
    
75.                         @place: 50px 44px;
    
76.                         background: url('https://638183.freep.cn/638183/t22/gif/ying1.gif');
    
77.                         offset-path: path('M50 44 Q500 300 900 44');
    
78.                         offset-distance: 0%;
    
79.                         animation: fly 30s calc((@size - @i) * -2.5s) infinite linear var(--state);
    
80.                 }
    
81.                
    
82.                 @keyframes fly { to { offset-distance: 100%; }}
    
83.         </css-doodle>
    
84.         <css-doodle grid="1" id="lrc">
    
85.                 :doodle {
    
86.                         @size: auto 3em;
    
87.                         left: 50%;
    
88.                         top: 5%;
    
89.                         transform: translate(-50%);
    
90.                         --geci: '';
    
91.                         --motion: cover2;
    
92.                         --tt: 1s;
    
93.                 }
    
94.                 display: grid;
    
95.                 place-items: center start;
    
96.                 :before, :after {
    
97.                         content: var(--geci);
    
98.                         width: fit-content;
    
99.                         height: fit-content;
    
100.                         font: bold 2.4em Sans-serif;
     
101.                         color: #ccc;
     
102.                         text-shadow: 1px 1px 2px #000;
     
103.                         white-space: pre;
     
104.                 }
     
105.                 :after {
     
106.                         position: absolute;
     
107.                         white-space: pre;
     
108.                         width: 0;
     
109.                         color: red;
     
110.                         overflow: hidden;
     
111.                         animation: var(--motion) var(--tt) linear forwards var(--state);
     
112.                 }
     
113.                 @keyframes cover1 { from { width: 0; } to { width: 100%; } }
     
114.                
     
115.         </css-doodle>
     
116.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2006523886" autoplay="autoplay" loop="loop"></audio>
     
117. 
     
118. </outer-box>
     
119. 
     
120. <script>
     
121. (function(){
     
122.         let script = document.createElement('script');
     
123.         script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
     
124.         document.head.appendChild(script);
     
125.         let mKey = 0, mFlag = true, slip = 0;
     
126.         let lrcAr = [];
     
127.         let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
     
128.         let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
     
129.         let showLrc = (time) => {lrc.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2');lrc.style.setProperty('--geci', '"' + lrcAr[mKey][1] + '"');lrc.style.setProperty('--tt', time + 's');mKey += 1;mFlag = !mFlag;};
     
130.         let calcKey = () => {for (j = 0;j < lrcAr.length;j++) {if (aud.currentTime <= lrcAr[j][0]) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);showLrc(time);};
     
131.         aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr[j][0]) {cKey = j;if (mKey === j) showLrc(lrcAr[j][2]);else continue;}}mplayer.style.setProperty('--prog', 100*aud.currentTime/aud.duration + '%');mplayer.style.setProperty('--tt1', `'${toMin(aud.currentTime)}'`);mplayer.style.setProperty('--tt2', `'${toMin(aud.duration)}'`);});
     
132.         aud.addEventListener('play', mState, false);
     
133.         aud.addEventListener('pause', mState, false);
     
134.         aud.addEventListener('seeked', () => calcKey());
     
135.         window.onload = () => {
     
136.                 let btns = mplayer.shadowRoot.querySelectorAll('cell');
     
137.                 let ww = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--ww'));
     
138.                 btns[2].onclick = () => aud.paused ? aud.play() : aud.pause();
     
139.                 btns[0].onclick = (e) => aud.currentTime = e.offsetX * aud.duration / ww;
     
140.         }
     
141. })();
     
142. </script>

复制代码

二三、《神秘的黄昏》地址：http://qslt.net/forum.php?mod=viewthread&tid=3976，代码如下：

1. <style>
   
2. #papa { center; width: 1200px; height: 740px; background: gray url('https://s1.ax1x.com/2023/08/12/pPuK4IS.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display:grid; place-items: center; user-select: none; overflow: hidden; position: relative; z-index: 1; }
   
3. #mplayer { position: absolute; bottom: 10px; width: fit-content; height: fit-content; display: flex; align-items: center; gap: 8px; z-index: 9; }
   
4. #btnwrap { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(to top right, lightblue, blue); cursor: pointer; }
   
5. #btnwrap:hover { background: #000 linear-gradient(to top right, snow, teal); }
   
6. #btnplay { width: 20px; height: 20px; background: #ccc; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
   
7. #btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
   
8. #prog { width: 300px; height: 2px; background: #ccc linear-gradient(to right,red,orange,blue,tomato) no-repeat; background-size: 1px 2px; cursor: pointer; position: relative;  }
   
9. #prog::before { position: absolute; content: ''; top: -7px; width: inherit; height: 15px; }
   
10. #prog:hover::before { background: rgba(200,200,200,.15); }
    
11. #tmsg { font: normal 16px sans-serif; color: snow;  }
    
12. #lrc { position: absolute; left: 20px; top: 20px; font: bold 1.5em sans-serif; color: skyblue; text-shadow: 2px 2px 2px #222; opacity: 1; animation: opa 1.9s infinite alternate; }
    
13. #wave { position: absolute; display: block; top: 0; }
    
14. @keyframes opa { to { opacity: .3;} }
    
15. </style>
    
16. 
    
17. <div id="papa">
    
18.         <div id="mplayer"><span id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></span><span id="prog"></span><span id="tmsg">00:00 | 00:00</span></div>
    
19.         <div id="lrc"></div>
    
20.         <svg id="wave" width="600" height="600"> <!-- 模拟电波 -->
    
21.                 <circle cx="300" cy="300" r="0" fill="none" stroke="lightgreen" stroke-width="4">
    
22.                         <animate attributeName="r" begin="0s" from="0" to="290" dur="6s" repeatCount="indefinite"></animate>
    
23.                         <animate attributeName="stroke-opacity" begin="0s" from="0.5" to="0" dur="6s" repeatCount="indefinite"></animate>
    
24.                 </circle>
    
25.                 <circle cx="300" cy="300" r="0" fill="none" stroke="skyblue" stroke-width="3">
    
26.                         <animate attributeName="r" begin="0.5s" from="0" to="290" dur="6s" repeatCount="indefinite"></animate>
    
27.                         <animate attributeName="stroke-opacity" begin="0.5s" from="0.5" to="0" dur="6s" repeatCount="indefinite"></animate>
    
28.                 </circle>
    
29.                 <circle cx="300" cy="300" r="0" fill="none" stroke="lightblue" stroke-width="2">
    
30.                         <animate attributeName="r" begin="1s" from="0" to="290" dur="6s" repeatCount="indefinite"></animate>
    
31.                         <animate attributeName="stroke-opacity" begin="1s" from="0.5" to="0" dur="6s" repeatCount="indefinite"></animate>
    
32.                 </circle>
    
33.                 <circle cx="300" cy="300" r="0" fill="none" stroke="red" stroke-width="1">
    
34.                         <animate attributeName="r" begin="1.5s" from="0" to="290" dur="6s" repeatCount="indefinite"></animate>
    
35.                         <animate attributeName="stroke-opacity" begin="1.5s" from="0.5" to="0" dur="6s" repeatCount="indefinite"></animate>
    
36.                 </circle>
    
37.         </svg>
    
38. </div>
    
39. 
    
40. <script>
    
41. let lrcAr = [
    
42.         ['0.00','神秘黄昏'],
    
43.         ['240.00','']
    
44. ];
    
45. let aud = new Audio();
    
46. aud.src = 'https://music.163.com/song/media/outer/url?id=1813024829.mp3';
    
47. aud.autoplay = true;
    
48. aud.loop = true;
    
49. btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
    
50. prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
    
51. aud.addEventListener('pause', () => btnstate());
    
52. aud.addEventListener('play',() => btnstate());
    
53. aud.addEventListener('timeupdate', () => {
    
54.         prog.style.backgroundSize = prog.offsetWidth * aud.currentTime / aud.duration + 'px 2px';
    
55.         tmsg.innerText = toMin(aud.duration) + ' | ' + toMin(aud.currentTime);
    
56.         for(j=0; j<lrcAr.length; j++) {
    
57.                 if(aud.currentTime >= lrcAr[j][0]) lrc.innerText = lrcAr[j][1];
    
58.         }
    
59. });
    
60. let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
    
61. let toMin = (val)  => {
    
62.         if (!val) return '00:00';
    
63.         val = Math.floor(val);
    
64.         let min = parseInt(val / 60), sec = parseFloat(val % 60);
    
65.         if(min < 10) min = '0' + min;
    
66.         if(sec < 10) sec = '0' + sec;
    
67.         return min + ':' + sec;
    
68. }
    
69. </script>

复制代码

夜雨

有些看不懂

婴宁

二四、《星空》地址：http://qslt.net/forum.php?mod=viewthread&tid=4032，代码如下：

1. <style>
   
2. #papa {
   
3.         margin: -80px 0  0 calc(50% - 593px);
   
4.         width: 1234px;
   
5.         height: 740px;
   
6.         background: url('https://s1.ax1x.com/2023/08/18/pP1bQeI.jpg') center/cover no-repeat;
   
7.         overflow: hidden;
   
8.         position: relative;
   
9.         --state: paused;
   
10. }
    
11. #mplayer {
    
12.         position: absolute;
    
13.         width: 40px;
    
14.         height: 40px;
    
15.         border-radius: 50%;
    
16.         box-shadow: 10px 8px snow;
    
17.         cursor: pointer;
    
18.         animation: rot 1s infinite linear alternate var(--state);
    
19. }
    
20. #mplayer::before {
    
21.         position: absolute;
    
22.         content: '';
    
23.         top: 10px;
    
24.         left: 10px;
    
25.         width: 100%;
    
26.         height: 100%;
    
27. }
    
28. #wrap {
    
29.         position: absolute;
    
30.         width: 100%;
    
31.         height: 50%;
    
32.         transform: rotate(-30deg);z=[[]]
    
33. }
    
34. .line {
    
35.         --du: 10s; --delay: 0s;
    
36.         position: absolute;
    
37.         width: 2px;
    
38.         height: 100px;
    
39.         top: -200px;
    
40.         opacity: .9;
    
41.         background: linear-gradient(to top, snow, transparent);
    
42.         animation: flow var(--du) var(--delay) infinite linear;
    
43. }
    
44. @keyframes flow { to { top: 100%; opacity: 0; } }
    
45. @keyframes rot { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
    
46. </style>
    
47. 
    
48. <div id="papa">
    
49.         <div id="wrap"></div>
    
50.         <div id="mplayer"></div>
    
51.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1387078234" autoplay loop></audio>
    
52. </div>
    
53. 
    
54. <script>
    
55. let total = 40, ww = wrap.offsetWidth;
    
56. Array.from({length:total}).forEach((item,key) => {
    
57.         let sp = document.createElement('span');
    
58.         sp.className = 'line';
    
59.         sp.style.cssText += `
    
60.                 --delay: ${Math.random() * 4 - 4}s;
    
61.                 --du: ${Math.random() * 8 + 4}s;
    
62.                 left: ${Math.random() * ww}px;
    
63.                 height: ${Math.random() * 50 + 50}px;
    
64.         `;
    
65.         wrap.appendChild(sp);
    
66. });
    
67. let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
68. aud.addEventListener('play', mState, false);
    
69. aud.addEventListener('pause', mState, false);
    
70. mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    
71. </script>

复制代码

二五、《绿野仙踪》地址：http://qslt.net/forum.php?mod=viewthread&tid=4069，代码如下：

1. <style>
   
2. #papa {
   
3.         margin: 0 0 0 calc(50% - 593px);
   
4.         width: 1234px;
   
5.         height: 740px;
   
6.         background: snow url('https://s1.ax1x.com/2023/08/18/pP1bKOA.jpg') no-repeat center/cover;
   
7.         box-shadow: 100 8px #000;
   
8.         position: relative;
   
9.         --state: paused; --delay: 0s;
   
10. }
    
11. #papa::before, #papa::after {
    
12.         position: absolute;
    
13.         content: url('http://qslt.net/data/attachment/forum/202308/16/102439ghzyhxb20u2hekef.gif');
    
14.         transform: rotate(0deg);
    
15.         
    
16.         animation: fly 30s var(--delay) infinite linear var(--state);
    
17. }
    
18. #papa::after { --delay: 15s; }
    
19. #papa > img {
    
20.         position: absolute;
    
21.         left: 65%;
    
22.         bottom: 20%;
    
23.         cursor: pointer;
    
24. }
    
25. @keyframes fly { to { offset-distance: 0%; } }
    
26. </style>
    
27. 
    
28. <div id="papa">
    
29.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=866210299" autoplay="autoplay" loop="loop"></audio>
    
30.         
    
31. </div>
    
32. 
    
33. <script>
    
34. (function() {
    
35.         let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
36.         aud.addEventListener('play', mState, false);
    
37.         aud.addEventListener('pause', mState, false);
    
38.         papa.onclick = () => aud.paused ? aud.play() : aud.pause();
    
39.         mplayer.onmouseover = () => mplayer.src = 'https://638183.freep.cn/638183/2-2.gif';
    
40.         mplayer.onmouseout = () => mplayer.src = 'https://638183.freep.cn/638183/2-0.gif';
    
41. })();
    
42. </script>

复制代码

二七、《雪域》地址：http://qslt.net/forum.php?mod=viewthread&tid=4077，代码如下：

1. <style>
   
2. 
   
3. #papa { margin-left: calc(50% - 593px); display: grid; place-items: center; width: 1234px; height: 740px; background: #000 url('https://s1.ax1x.com/2023/08/20/pP8oEKs.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; perspective: 1000px; overflow: hidden; user-select: none; position: relative; z-index: 1; }
   
4. #papa::after { position: absolute; content: '雪  域'; top: 10px; font: bold 3em sans-serif; color: snow; text-shadow: 2px 2px 3px #ccc; opacity: .6; }
   
5. #mplayer { position: absolute; bottom: 10px; z-index: 1000; }
   
6. #btnwrap { display: block; fill: hsla(30, 20%, 80%, .9); cursor: pointer; }
   
7. #btnwrap:hover { fill: hsla(90, 100%, 100%, .9); }
   
8. #tmsg { fill: hsla(30, 100%, 90%, .9); stroke: none; font: bold 1em sans-serif; }
   
9. .stars { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: silver; transform-style: preserve-3d; }
   
10. @keyframes move { to { transform: rotate(0) translate3d(0, 0, 0); } }
    
11. 
    
12. </style>
    
13. 
    
14. <div id="papa">
    
15.         <svg id="mplayer" width="120" height="120">
    
16.                 <g id="mama" transform="rotate(-90, 60, 60)" style="cursor: pointer;">
    
17.                         <circle id="track" cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke="hsla(240, 20%, 80%, .77)" />
    
18.                         <circle id="prog" cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke="hsla(240,100%,60%,.65)" />
    
19.                 </g>
    
20.                 <g id="btnwrap">
    
21.                         <path id="btnplay" d="M 50 50,50 70,70, 60 z"></path>
    
22.                         <path id="btnpause" d="M 52 50,52 70,57 70,57 50,52 50 z M 60 50,60 70,65 70,65 50,60 50 z" style="display: none;"></path>
    
23.                         <path d="M 57 50,60 50,60 70,57 70 z" fill="transparent" />
    
24.                 </g>
    
25.                 <path id="curPath" d="M 20 70 Q 60 0 100 70" fill="none" stroke="none"/>
    
26.                 <path id="durPath" d="M 20 55 Q 60 110 100 55" fill="none" stroke="none"/>
    
27.                 <g id="tmsg">
    
28.                         <text x="34" y="0"><textPath id="curMsg" xlink:href="#curPath" dominant-baseline="text-after-edge">00:00</textPath></text>
    
29.                         <text x="29" y="0"><textPath id="durMsg" xlink:href="#durPath" dominant-baseline="text-before-edge">00:00</textPath></text>
    
30.                 </g>
    
31.         </svg>
    
32. </div>
    
33. <audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/11/04/dc52a9ca7610090421f620496f39715b.mp3" loop autoplay></audio>
    
34. 
    
35. <script>
    
36. 
    
37. (function() {
    
38.         (function() {for(j=0; j<500; j++) {let ele = document.createElement('span');ele.className = 'stars';ele.style.cssText += `left: ${Math.random() * 200 + 420}px;top: ${Math.random() * 100 + 260}px;background: hsla(${Math.random() * 255}, ${Math.random() * 50 + 40}%,${Math.random() * 40 + 20}%, ${Math.random() * .5 + .4});box-shadow: 0 0 5px hsla(0,10%,100%,.25);transform: rotate(${Math.random() * 720}deg) translate3d(${Math.random() * 500}px,${Math.random() * 300}px,${Math.random() * 1000}px);animation: move 30s infinite ${-10 - Math.random() * 20}s linear;`;papa.appendChild(ele);}})();
    
39.         let cc = { x: 1*track.getAttribute('cx'), y: 1*track.getAttribute('cy'), len: track.getTotalLength(),};
    
40.         prog.style.strokeDasharray = prog.style.strokeDashoffset =cc.len;
    
41.         btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
    
42.         mama.onclick = (e) => {let deg = Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;deg += (e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;aud.currentTime = aud.duration * deg / 360;};
    
43.         aud.addEventListener('pause', () => mState());
    
44.         aud.addEventListener('play', () => mState());
    
45.         aud.addEventListener('seeked', () => aud.play());
    
46.         aud.addEventListener('timeupdate', () => {prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration;curMsg.textContent = toMin(aud.currentTime);durMsg.textContent = toMin(aud.duration);});
    
47.         let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
    
48.         let toMin = (val)  => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if(min < 10) min = '0' + min;if(sec < 10) sec = '0' + sec;return min + ':' + sec;};
    
49.         document.title = '雪  乡';
    
50. })();
    
51. 
    
52. </script>
    

复制代码

二八、《自由自在》地址：http://qslt.net/forum.php?mod=viewthread&tid=4107，代码如下：

1. <style> #papa { margin: 0 0 0 calc(50% - 593px); display: grid; place-items: center; width: 1234px; height: 780px; background: lightblue url('https://s1.ax1x.com/2023/08/20/pP8TAJO.jpg') no-repeat center/cover; box-shadow: 30px 3px 20px #000; user-select: none; position: relative; z-index: 1; } </style>
   
2. 
   
3. <div id="papa">
   
4.         <img src="http://qslt.net/data/attachment/forum/202308/11/120506zy8dyltotmknyaiy.gif" alt="" style="position: absolute; bottom: 0; right: 0;" />
   
5. </div>
   
6. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1840182622.mp3" loop autoplay></audio>
   
7. 
   
8. <script >
   
9. 
   
10. //插件代码略
    
11. //歌词数组代码样式↓
    
12. let lrcAr = [[0.95,"Je voudrais du soleil vert<br>",2.6],[5.27,"Des dentelles et des théières<br>",]];
    
13. 
    
14. //设置播放器插件参数↓
    
15. HCPlayer({
    
16.         lrcAr: lrcAr,
    
17.         lrc_css: `
    
18.                 top: 5px;
    
19.                 left: 50%;
    
20.                 transform: translate(-50%);
    
21.                 --bg: linear-gradient(hsla(100,70%,50%,.35),hsla(120,40%,40%,.6));
    
22.                 color: hsla(120,100%,95%,.95);
    
23.         `,
    
24.         player_css: `
    
25.                 bottom: 20px;
    
26.                 --color: snow;
    
27.                 --ww: 200px;
    
28.                 --btn_size: 40px;
    
29.                 --btn_img: url("https://638183.freep.cn/638183/t22/btn/g3.png") no-repeat center/cover;
    
30.         `,
    
31. });
    
32. 
    
33. </script>

复制代码

二九、《追逐》地址：http://qslt.net/forum.php?mod=viewthread&tid=4109，代码如下：

1. <style>
   
2. #papa { margin: auto; width: 1234px; height: 740px; background: tan url('https://s1.ax1x.com/2023/08/15/pPQlWA1.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; user-select: none; position: relative; display: grid; grid-template-rows: -10fr 3fr 1fr; grid-template-areas: 'top top top' 'left mid mid' '. foot foot'; z-index: 1; }
   
3. #papa > div { position: relative; display: grid; }
   
4. .pTop { grid-area: top; place-items: center; }
   
5. .pMid { grid-area: mid; }
   
6. .pFoot { grid-area: foot; place-items: center; }
   
7. .pLeft { grid-area: left; place-items: end; }
   
8. #mplayer { position: absolute;bottom: 0; width: 300px; height: 80px; user-select: none; display: grid; place-items: center; cursor: pointer; }
   
9. #mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); } #mplayer:hover #btnwrap { background: linear-gradient(to top right, hsla(0,100%,50%, .5), hsla(120,100%,50%, .5)); border-radius: 50%; opacity: .75; }
   
10. #btnwrap, #prog { position: absolute; display: grid; place-items: center;transition: .5s; } #btnwrap { --yy: -15px; width: 40px; height: 40px; transform: rotate(45deg); border: 1px solid hsla(0,50%,80%, .65); border-radius: 6px; opacity: 0; }
    
11. #btnplay { width: 20px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); transform: translateX(3px); }
    
12. #btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
    
13. #prog { --yy: 20px; width: 300px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, hsla(120,100%,50%, .6), hsla(0,100%,50%, .75) 100%, transparent 0); border: 1px solid hsla(120,100%,70%, .6); font: normal 14px / 16px sans-serif; color: hsl(60,100%,50%); opacity: .75; }
    
14. #lrc { font: bold 2em sans-serif; color: transparent; letter-spacing: 2px; background: linear-gradient(-90deg, hsla(120,40%,50%, .6), hsla(120,100%,100%, .5)) 100% 100% / 200% 200%; background-clip: text; -webkit-background-clip: text; filter:drop-shadow(1px 1px 2px #000); }
    
15. @keyframes bgMove1 { from { background-position: 0 0; } to { background-position: -100% 0; } }
    
16. @keyframes bgMove2 { from { background-position: 0 0; } to { background-position: -100% 0; } }
    
17. </style>
    
18. 
    
19. <div id="papa">
    
20.         <div class="pTop"><span id="lrc"></span></div>
    
21.         <div class="pMid"><img src="http://qslt.net/static/image/common/lingchong/67.gif" alt="" /></div>
    
22.         <div class="pLeft"><img src="http://qslt.net/static/image/common/lingchong/13.gif" alt="" style="width: 120px; mix-blend-mode: multiply; transform: translateX(320px);" /></div>
    
23.         <div class="pFoot">
    
24.                 <div id="mplayer"><span id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></span><span id="prog"></span></div>
    
25.         </div>
    
26. </div>
    
27. 
    
28. <script>
    
29. let lrcAr = [];
    
30. let mKey = 0, mSeek = false, mFlag = true, aud = new Audio();
    
31. aud.src = 'https://music.163.com/song/media/outer/url?id=1888407466.mp3';
    
32. aud.autoplay = true;
    
33. aud.loop = true;
    
34. btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
    
35. prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
    
36. aud.addEventListener('pause', () => mState());
    
37. aud.addEventListener('play', () => mState());
    
38. aud.addEventListener('seeked', () => calcKey());
    
39. aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, hsla(120,100%,50%, .6), hsla(0,100%,50%, .75) ' + aud.currentTime / aud.duration * 100 + '%, hsla(0,100%,100%, .45) 0)';prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);for(j=0; j<lrcAr.length; j++) {if(aud.currentTime >= lrcAr[j][0]) {if(mKey === j) showLrc(lrcAr[j][2]);else continue;}}});
    
40. let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.animationPlayState = 'paused') : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.animationPlayState = 'running');
    
41. let showLrc = (time) => {lrc.style.animation = (mFlag ? 'bgMove1 ' : 'bgMove2 ') + time + 's linear forwards';lrc.innerHTML = lrcAr[mKey][1];mKey += 1;mFlag = !mFlag;}
    
42. let calcKey = () => {for(j = 0; j < lrcAr.length; j ++) {if(aud.currentTime <= lrcAr[j][0]) {mKey = j - 1;break;}}if(mKey <0) mKey = 0;if(mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let mtime = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);showLrc(mtime);}
    
43. let toMin = (val)  => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if(min < 10) min = '0' + min;if(sec < 10) sec = '0' + sec;return min + ':' + sec;}
    
44. </script>
    

复制代码

婴宁

三十、《这里的时光静悄悄》地址：http://qslt.net/forum.php?mod=viewthread&tid=4110，代码如下：

1. <style>#papa {
   
2.         margin: 0 0 0 calc(50% - 600px);
   
3.         width: 1200px;
   
4.         height: 700px;
   
5.         background: lightblue url('https://s1.ax1x.com/2023/08/20/pP8TAJO.jpg') no-repeat;
   
6.         box-shadow: 3px 3px 20px #000;
   
7.         display: grid;
   
8.         place-items: center;
   
9.         user-select: none;
   
10.         position: relative;
    
11.         z-index: 1;
    
12. }
    
13. #mplayer {
    
14.         position: absolute;
    
15.         display: grid;
    
16.         grid-template-areas:
    
17.                 'cur btnplay dur'
    
18.                 'prog prog prog';
    
19.         gap: 0 4px;
    
20.         place-items: end center;
    
21.         font-size: 14px;
    
22.         bottom: 20px;
    
23. }
    
24. #cur { grid-area: cur; color: purple; }
    
25. #dur { grid-area: dur; color: purple; }
    
26. #btnplay {
    
27.         grid-area: btnplay;
    
28.         display: grid;
    
29.         grid-auto-flow: column;
    
30.         place-items: end center;
    
31.         gap: 0 4px;
    
32.         height: 160px;
    
33.         cursor: pointer;
    
34. }
    
35. #btnplay > span {
    
36.         background: red;
    
37.         width: 2px;
    
38.         transition: .3s;
    
39. }
    
40. #prog {
    
41.         grid-area: prog;
    
42.         width: 300px;
    
43.         height: 16px;
    
44.         opacity: .65;
    
45.         cursor: pointer;
    
46.         position: relative;
    
47. }
    
48. 
    
49. </style>
    
50. 
    
51. <div id="papa">
    
52.         <div id="mplayer">
    
53.                 <div id="cur">00:00</div>
    
54.                 <div id="btnplay"></div>
    
55.                 <div id="dur">00:00</div>
    
56.                 <progress id="prog" max="100"></progress>
    
57.         </div>
    
58.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=463859653.mp3" loop="" autoplay=""></audio>
    
59.         <img src="http://qslt.net/data/attachment/forum/202308/14/214938v6drkdcwd140bsra.gif" alt="" style="position: absolute; width: 120px; top: 85px; left: 186px;">
    
60.         <img src="http://qslt.net/data/attachment/forum/202308/21/132439d3vj03auzv0w0046.gif" alt="" style="position: absolute; width: 500px; top: 90px; left: 620px; transform: rotate(-60deg);">
    
61.         <img src="http://qslt.net/data/attachment/forum/202308/11/120507dgmvjmyyp3kafpsz.gif" alt="" style="position: absolute; width: 650px; top: 320px; right: 80px; transform: rotate(-35deg);"></div>
    
62. 
    
63. <div id="comment_1780079" class="cm">
    
64. <br></div>

复制代码

三一、《秋水》地址：http://qslt.net/forum.php?mod=viewthread&tid=4216，代码如下：

1. <style>
   
2.   .container0 {
   
3.   margin: 50px auto;
   
4.   width: 1200px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #FAF6F6; overflow: hidden;
   
5.   height: 720px;
   
6. border: 1px solid;
   
7. background: #333 url('https://s1.ax1x.com/2023/08/16/pPQjMVI.jpg') no-repeat center/cover; overflow: hidden;
   
8.   position: relative;
   
9. }
   
10. 
    
11. .photo {
    
12.   position: absolute;top:130px; left:180px;
    
13. width: 65%;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 10px #FAF6F6;
    
14.   height: 60%;transform:perspective(00px); background:
    
15.     linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    
16.    url("");
    
17.   background-size: 0, cover;
    
18.   box-sizing: border-box;preserve-3d;
    
19.   animation: round 32s infinite;
    
20.   opacity: 0;
    
21. }
    
22. @keyframes round {
    
23.   0% {opacity: 1;transform:perspective(600px) rotateX(-180deg)scale(1);}
    
24. 
    
25. 10% {opacity: 1;transform:perspective(600px)rotateX(30deg)scale(1)}
    
26. 12% {opacity: 0.9;transform:perspective(600px)rotateX(0deg)scale(1)}
    
27. 18% {opacity: 0;transform:perspective(600px)rotateX(0deg)scale(1)}
    
28. }
    
29. 
    
30. img:nth-child(1) {animation-delay: 28s;}
    
31. img:nth-child(2) {animation-delay: 16s;}
    
32. img:nth-child(3) {animation-delay: 8s;}
    
33. 
    
34.     </style>
    
35. 
    
36. 
    
37. <div class="container0">
    
38.   <img class='photo'  src="https://s1.ax1x.com/2023/08/08/pPVN2ss.jpg" alt="" />
    
39.   <img class='photo'  src="https://s1.ax1x.com/2023/08/08/pPVNRLn.jpg" alt="" />
    
40.   <img class='photo'  src="https://s1.ax1x.com/2023/07/02/pCDDY1P.jpg" alt="" />
    
41.   
    
42. 
    
43. <div class="container">
    
44.       <div class="btn">
    
45.         <span id="bf"onclick="bf();"style="width: 120px; height: 120px;z-index: 550;position: absolute;top:-60px; left:880px;"></span>
    
46.         <span id="bf"onclick="rbf();"></span>
    
47.       </div>
    
48. <audio autoplay="" class="audio" id="MusicPlayer" src="https://music.163.com/song/media/outer/url?id=38679066.mp3" controls loop style="width: 1%; height: 1%;z-index: 1;"></audio>
    
49. <div class="img_border"><img src="http://pan.yinhuabbs.cn/view.php/caef5d12b92eaa7fad771e288f5cb7c9.png" id="aplay"style="width: 100%; height: 100%;z-index: 550;" ></div>
    
50.      <div class="items" >
    
51. <div  class="lrc">
    
52.         <ul id="ullrc">
    
53.          </ul>
    
54.       </div>
    
55. </div>
    
56. </div>
    
57. 
    
58. 
    
59. <style type="text/css">
    
60. .container{width: 1px;height: 1px;
    
61.     margin: 0;position: absolute;top:500px; left:-30px;z-index: 550;
    
62. }
    
63. .container #MusicPlayer{
    
64.     width: 250px;
    
65.     display: block;
    
66.     margin: 0 auto;
    
67. }
    
68. .container .btn{
    
69.     display: block;
    
70.     margin: 0;
    
71. }
    
72. .container .lrc{
    
73.     width: 960px;
    
74.     height: 180px;z-index: 550;
    
75.     overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px  0);
    
76.     display: block;position: absolute;top:-70px; left:0px;
    
77.     margin: 0 auto;
    
78. }
    
79. .container .lrc #ullrc{
    
80.     width: 100%;
    
81.     padding: 0;
    
82.     list-style: none;
    
83.     transition: 0.3s all ease;
    
84.     margin: 0;
    
85. }
    
86. /*歌词普通样式*/
    
87. .container .lrc #ullrc li{
    
88.     height: 80px;
    
89.     line-height: 90px;
    
90. font-family:悟空大字库;
    
91.     font-size: 30px;
    
92.     color: #000078;transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    
93.     font-weight: normal;
    
94.     transition: .3s all ease;/*一定要加上不然看着突兀*/
    
95.     list-style-type: none;
    
96.     text-align: center;
    
97.     display: block;
    
98.     width: 100%;
    
99.     margin: 0 auto;
    
100. 
     
101. }
     
102. /*动态歌词样式*/
     
103. .container .lrc #ullrc li.active{
     
104.     font-size: 40px;
     
105.     color: #ff0000;transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
     
106.     font-weight: bold;
     
107. }
     
108. /*光碟动画*/
     
109. .container .img_border{display:inline-block;width:120px;height:120px;margin:0px ;position: absolute;top:-60px; left:880px;z-index: 150;}
     
110. .container .img_border #aplay{ }
     
111. .container .z360z{-webkit-animation:rotating 10s linear infinite;animation:rotating 10s linear infinite}@-webkit-keyframes rotating{0% {transform: rotateX(0deg) rotateY(0deg)
     
112. rotateZ(0deg)scale(0.2);}
     
113. 50% {transform: rotateX(0deg) rotateY(0deg) rotateZ(-30deg)scale(2.5);}
     
114. 100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg)scale(2.5);}
     
115. }
     
116. .audio{
     
117.     z-index: 1;
     
118.     bottom: 0;
     
119.     opacity: 0;
     
120. transition: all 2s;
     
121. width: 1px;
     
122. height: 1px;
     
123. position: absolute;top:0px; left:0px;
     
124. }
     
125. .audio:hover{
     
126.     opacity: 0;
     
127. }
     
128. </style>
     
129. <style type="text/css">.items  { z-index: 1540;animation: slider 0.26s linear infinite ;}
     
130. @keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
     
131. 50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
     
132. </style>
     
133. 
     
134. <style type="text/css">.items1  { animation: slider1 1s linear infinite ;}
     
135. @keyframes slider1 {from {opacity: 1;filter:hue-rotate(360deg)contrast(100%)brightness(80%);}
     
136. to {opacity: 1;filter:hue-rotate(0deg)contrast(100%)brightness(100%);}}
     
137. </style>
     
138. <script >var lrc = `[00:00] ;
     
139. function $(id) {return document.getElementById(id);
     
140. }//这样写以后getid方便
     
141. function getLrcArray() {
     
142.     var parts = lrc.split("\n");
     
143.     for (let index = 0; index < parts.length; index++) {
     
144.         parts[index] = getLrcObj(parts[index]);
     
145.     }
     
146.     return parts;
     
147. 
     
148.     function getLrcObj(content) {
     
149.         var twoParts = content.split("]");
     
150.         var time = twoParts[0].substr(1);
     
151.         var timeParts = time.split(":");
     
152.         var seconds = +timeParts[1];
     
153.         var min = +timeParts[0];
     
154.         seconds = min * 60 + seconds;
     
155.         var words = twoParts[1];
     
156.         return{
     
157.             seconds: seconds,
     
158.             words: words,
     
159.         };
     
160.     }
     
161. }
     
162. 
     
163. var lrcArray = getLrcArray();
     
164. 
     
165. function inputLrc() {
     
166.     for (let index = 0; index < lrcArray.length; index++) {
     
167.         var li = document.createElement("li");
     
168.         li.innerText = lrcArray[index].words;
     
169.         $("ullrc").appendChild(li);
     
170.     }
     
171. }
     
172. 
     
173. inputLrc();
     
174. 
     
175. function setPosition() {
     
176.     var index = getLrcIndex();
     
177.     if (index == -1) {
     
178.         return;
     
179.     }
     
180.     var lrc_li_height = 80, lrc_ul_height = 90;
     
181.     var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
     
182.     if (top < 0) {
     
183.         top = 0;
     
184.     }
     
185.     $("ullrc").style.marginTop = -top + "px";
     
186.     var activeLi = $("ullrc").querySelector(".active");
     
187.     if(activeLi){
     
188.         activeLi.classList.remove("active");
     
189.     }
     
190.     $("ullrc").children[index].classList.add("active");
     
191. }
     
192. 
     
193. var turn = 0;
     
194. 
     
195. function getLrcIndex(){
     
196.     var time = $("MusicPlayer").currentTime + turn;
     
197.     for (var index = 0; index < lrcArray.length; index++) {
     
198.         if (lrcArray[index].seconds > time) {
     
199.             return index - 1;
     
200.         }
     
201.     }
     
202. }
     
203. 
     
204. $("MusicPlayer").ontimeupdate = setPosition;
     
205. </script>
     
206. <script>
     
207.         function rbf() {
     
208.             var audio = document.getElementById('MusicPlayer');
     
209.             var bf=document.getElementById("bf");
     
210.             audio.currentTime = 0;
     
211.             audio.play();
     
212.             bf.innerText="";
     
213.         }
     
214. 
     
215.         function bf() {
     
216.             var audio = document.getElementById('MusicPlayer');
     
217.             var bf=document.getElementById("bf");
     
218.             if (audio !== null) {
     
219.                 if (audio.paused) {
     
220.                     audio.play(); //audio.play();// 这个就是播放  
     
221.                     bf.innerText="";
     
222.                 } else {
     
223.                     audio.pause(); // 这个就是暂停
     
224.                     bf.innerText="";
     
225.                 }
     
226.             }
     
227.         }
     
228.     </script>
     
229. <script type="text/javascript">
     
230. var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()
     
231. 
     
232. {document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
     
233. </script>

复制代码

婴宁

这几天琢磨出一个获取音画帖子源代码的法子，和大家分享一下。获取源代码，是为了编辑，把其中的图片和音乐特效替换成自己的，方法如下：

1、鼠标右键点击：查看网页源代码；此时是网页所有的代码，比较混乱。接下来要查找到自己需要的那部分。

2、Ctrl键+F键，是查找，在查找框输入#papa，找到后，把它后面的一段复制下来，粘贴到文本框或是Sublime Text 软件里，然后在前面加一个<style>。
把该文件保存为后辍为.html的文件，然后预览。根据自己的需要编辑。
   
如找到后辍为html格式的连接，直接点击打开。然后再重复上述操作，查找源代码，这一次是完整的代码了，全部直接复制粘贴就能编辑了。

@不系之舟  @夜雨  @念风 @聆听雨声  @所有喜欢音画的新手朋友们。

谁还有更好的办法，帖来大家一起分享吧。