123下一页
返回列表 发新帖
查看: 1773|回复: 25

[单图] 【经典】音画代码（与大家共享）

[复制链接]
婴宁
发表于 2023-8-22 11:28 | 显示全部楼层 |阅读模式
本帖最后由 花简静 于 2024-12-22 20:37 编辑

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

一、《梦里水乡》地址：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>

  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>

  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);

  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>

  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>

  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.         });

  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>

  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>

  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. })();

  50. </script>
复制代码



鲜花

5

查看全部鲜花

点评 收
回复

婴宁
 楼主| 发表于 2023-8-22 11:28 | 显示全部楼层
本帖最后由 婴宁 于 2023-8-22 11:27 编辑

四、《江南》地址：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>

  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>

  7. <div id="papa">
  8.         <span id="tit">我在纳林湖等着你</span>
  9.         <span id="ball"></span>
  10. </div>

  12. <script>
  13. let moveX = 0, moveY = 0, stepX = 1, stepY = 1, canMove = true, aud = new Audio(), timer;

  15. aud.src = 'https://music.163.com/song/media/outer/url?id=1851599756.mp3';
  16. aud.loop = true;
  17. aud.autoplay = true;

  19. timer = requestAnimationFrame(motion);

  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. }

  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.         }

  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>

  75. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1851314605" autoplay="autoplay" loop="loop"></audio>

  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>
复制代码







鲜花

4

查看全部鲜花

点评 收
回复

婴宁
 楼主| 发表于 2023-8-22 11:29 | 显示全部楼层
本帖最后由 婴宁 于 2023-8-24 16:15 编辑

七、《山水画》地址：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>

  9. <div id="papa">
  10.         <span id="lrcbox">山水画</span>
  11.         <canvas id="canv"></canvas>
  12.         <span id="disc"></span>
  13. </div>

  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();

  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');

  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. )

  44. idx = num(0, images.length - 1);

  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. })();

  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>

  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>

  60. <script>
  61. (function() {
  62. /*原始lrc歌词*/
  63. let lrcStr = `


  66. /*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画

  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. };

  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. };

  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. };

  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. };

  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. }

  145. /*函数 ：关键帧动画状态切换*/
  146. let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');

  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. });

  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(); });

  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>

  5. <div id="papa"></div>
  6. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1350265233.mp3" loop autoplay></audio>

  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>

  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);

  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>
复制代码


鲜花

1

查看全部鲜花

点评 收
回复

婴宁
 楼主| 发表于 2023-8-22 11:29 | 显示全部楼层
本帖最后由 婴宁 于 2023-8-24 16:18 编辑

十一、《醉美天下》地址：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>

  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>

  36. <script>
  37. let lrcAr = [];

  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. };

  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;

  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. };

  58. btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();

  60. aud.addEventListener('pause', () => mState());
  61. aud.addEventListener('play', () => mState());
  62. aud.addEventListener('seeked', () => calcKey());

  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. });

  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');

  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. }

  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. }

  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>

  13. <div id="papa">

  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>

  24. </div>
  25. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1855756345" autoplay loop></audio>

  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>

  18. <div id="papa"></div>
  19. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2046097236.mp3" loop autoplay></audio>

  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]`;


  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));}

  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.         });

  39.         FS({
  40.                 pa: papa,
  41.                 set: 'backgroun: transparent; color: snow; border: 2px dotted snow; left: 20px; top: 20px;',
  42.         });

  44.         aud.onerror = () => {
  45.                 if(aud.error.code === 4) aud.src = '';
  46.         }
  47. })();
  48. </script>
复制代码




鲜花

1

查看全部鲜花

点评 收
回复

婴宁
 楼主| 发表于 2023-8-22 11:29 | 显示全部楼层
本帖最后由 婴宁 于 2023-8-24 16:23 编辑

十四、《猫咪》地址：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>

  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>



复制代码

十四、《闲云野鹤》地址：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>

  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>

  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>

  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>

  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>

  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>

  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>

  9. <div id="papa">
  10.         <span id="lrcbox">纯音乐 - 烟花易冷</span>
  11.         <canvas id="canv"></canvas>
  12.         <span id="disc"></span>
  13. </div>

  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');

  30.         canv.onclick = function(event) {
  31.                 let x = event.offsetX || event.layerX, y = event.offsetY || event.layerY;
  32.                 createParticle(x, y);
  33.         }

  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.         }

  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.         }

  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.         }

  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.         }

  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>

  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>

  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>
复制代码


鲜花

1

查看全部鲜花

点评 收
回复

婴宁
 楼主| 发表于 2023-8-22 11:29 | 显示全部楼层
本帖最后由 婴宁 于 2023-8-24 16:27 编辑

十九、《锁心》地址：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>

  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>

  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>

  8. <div class="mydiv"></div>
  9. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2065995408.mp3" loop autoplay></audio>

  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);

  16. (function() {
  17.     let lrcAr = [];

  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>

  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>

  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>

  118. </outer-box>

  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>

  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>

  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>
复制代码



鲜花

1

查看全部鲜花

点评 收
回复

夜雨
发表于 2023-8-23 13:31 | 显示全部楼层
有些看不懂
点评 收
回复

婴宁
 楼主| 发表于 2023-8-24 16:31 | 显示全部楼层
二四、《星空》地址：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>

  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>

  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>

  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>

  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>

  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); } }

  12. </style>

  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>

  35. <script>

  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. })();

  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>

  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>

  8. <script >

  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>",]];

  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. });

  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>

  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>

  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>
复制代码



鲜花

1

查看全部鲜花

点评 收
回复

婴宁
 楼主| 发表于 2023-8-24 16:33 | 显示全部楼层
三十、《这里的时光静悄悄》地址：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. }

  49. </style>

  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>

  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. }

  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);}

  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. }

  30. img:nth-child(1) {animation-delay: 28s;}
  31. img:nth-child(2) {animation-delay: 16s;}
  32. img:nth-child(3) {animation-delay: 8s;}

  34.     </style>


  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.   

  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>


  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;

  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>

  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;

  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. }

  163. var lrcArray = getLrcArray();

  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. }

  173. inputLrc();

  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. }

  193. var turn = 0;

  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. }

  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.         }

  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()

  232. {document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
  233. </script>
复制代码




鲜花

1

查看全部鲜花

点评 收
回复

婴宁
 楼主| 发表于 2023-8-24 16:46 | 显示全部楼层

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

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

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

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

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

鲜花

1

查看全部鲜花

点评 收
回复

下一页 »
123下一页
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|千山论坛

GMT+8, 2025-2-24 05:09

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

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