带上音乐去旅行（学习黑黑将进酒·见千山播放器效果）
<style>#papa {margin: 120px 0 0 calc(50% - 665px);width: 1164px;height: 623px;background: lightgreen url('https://xlaj.cn/assets/file/zp/20230426194218.gif') center/cover no-repeat;box-shadow: 3px 3px 20px #000;position: relative;z-index: 1;--state: paused;}#papa::before, #papa::after {position: absolute;content: '';background: url('https://xlaj.cn/assets/file/zp/20230426194303.png') center/cover no-repeat;left: 84%; bottom: 0; width: 125px; height: 150px;}
#papa::after {transform: rotateY(-180deg) translate(100px);}
#lrc {--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, hsla(120, 80%, 50%, .45), hsla(120, 80%, 50%, .45));position: absolute;left: 40%;top: 70px;transform: translate(-50%);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 var(--state);}
#dt{ position: absolute; width: 353px; height: 460px; top: 150px; left: 52px; }
#dt1{ position: absolute; width: 60px; height: 49px; top: 480px; left: 990px; }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }</style>
<div id="papa">
<css-doodle id="mplayer">:doodle {@grid: 3 / 160px;cursor: pointer;position: absolute;left: calc(50% - 80px);top: 420px;animation: rot 6s infinite linear var(--state);}@place-cell: center;background: linear-gradient(45deg, green 49.5%, lightblue 50.5%, green 0);border-radius: 0 100%;transform: rotate(calc(360deg / (@size() - 1) * @i())) translate(50px);@at(1,1) {border-radius: 50%;background: radial-gradient(snow, green 60%, green 0);transform: rotate(0) translate(0);}@keyframes rot { to { transform: rotate(-1turn); } }</css-doodle>
<img id="dt" src="https://xlaj.cn/assets/file/zp/20230426194333.png" alt="" />
<img id="dt1" src="https://638183.freep.cn/638183/t22/gif/hudp.gif" alt="" />
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
</div>
<audio id="aud" src="https://xlaj.cn/assets/file/zp/20230426194536.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
(function () {
let mKey = 0, mFlag = true, script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js';
document.head.appendChild(script);
let lrcAr = [,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('seeked', () => calcKey());
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, 'n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
})();
</script>
@马黑黑
黑黑套用一个，谢谢黑黑源码分享 小辣椒好久没有完成作业了，今天用了岁月的(再会干一杯)粒子效果做了一个背景图谢谢岁月的精彩制作
@走过岁月 {:4_171:}
辣椒是个好同学 一学就会这本领还没忘{:4_196:} 好看，欣赏学习了！{:4_187:} 辫子哥哥 发表于 2023-4-26 21:00
辣椒是个好同学
哇塞~~今天你咋上来了{:4_185:} 辫子哥哥 发表于 2023-4-26 21:01
一学就会这本领还没忘
我都好久没有完成作业了 亦是金 发表于 2023-4-26 21:02
好看，欣赏学习了！
谢谢了，我这个是套用黑黑代码加了几个外加效果，简单的制作 小辣椒这么快就做出来了，很好 小辣椒的画面总是丰富多彩，赞 本帖最后由 亚伦影音工作室 于 2023-4-26 21:13 编辑
动感，震撼！若能控制动图就完美了！ 小辣椒 发表于 2023-4-26 21:03
哇塞~~今天你咋上来了
刚吃完饭上来看看 走过岁月 发表于 2023-4-26 21:10
小辣椒这么快就做出来了，很好
岁月晚上好~~~加了你的粒子就是漂亮，图图动起来了 小辣椒 发表于 2023-4-26 21:04
我都好久没有完成作业了
身体不好多休息少劳累 布局漂亮 辫子哥哥 发表于 2023-4-26 21:11
刚吃完饭上来看看
你得早下，原因你知道的，快下了去休息 走过岁月 发表于 2023-4-26 21:11
小辣椒的画面总是丰富多彩，赞
谢谢岁月，我只是套用了黑黑的代码，加了几个效果，主要是岁月的粒子音符漂亮 小辣椒 发表于 2023-4-26 21:05
谢谢了，我这个是套用黑黑代码加了几个外加效果，简单的制作
你的制作漂亮！令人眼睛一亮呢！{:4_187:} 辫子哥哥 发表于 2023-4-26 21:01
一学就会这本领还没忘
这个不能忘，否则对不起老师了