|
|

楼主 |
发表于 2024-6-20 12:07
|
显示全部楼层
本帖最后由 马黑黑 于 2024-6-20 13:00 编辑
帖子代码- <style>
- #tz { margin: 20px auto; width: 1024px; height: 574px; background: url('https://638183.freep.cn/638183/t24/3/yydo.jpg') no-repeat center/cover; box-shadow: 2px 2px 3px gray; z-index: 1; overflow: hidden; position: relative; }
- #tz::before { content: attr(data-lrc); position: absolute; left: 20px; top: 20px; width: 60px; height: 95%; writing-mode: vertical-rl; font: bold 32px/60px sans-serif; color: transparent; background: repeating-linear-gradient(to bottom, cyan, lightgreen, green, lightgreen, cyan) 50%/60px 200px; -webkit-background-clip: text; filter: drop-shadow(1px 1px 1px black); }
- #player { --size: 160px; position: absolute; right: 20px; top: 20px; width: var(--size); height: var(--size); display: grid; place-items: center; cursor: pointer; transition: filter 2s; filter: hue-rotate(0) drop-shadow(0 0 18px white); animation: rot 6s linear infinite var(--state); }
- #player::after { position: absolute; content: ''; width: calc(var(--size) / 6); height: calc(var(--size) / 6); border-radius: 50%; background: rgba(0,128,44,.95); }
- #player:hover { filter: hue-rotate(180deg) drop-shadow(0 0 4px yellow); }
- c-c { position: absolute; width: calc(var(--size) / 2); height: calc(var(--size) / 8); border-radius: 100%; background: rgba(0,153,51,.7); transform: rotate(var(--deg)) translate(calc(var(--size) / 4)); }
- .pic { position: absolute; top: 0; left: 0; width: 40px; transform: rotate(90deg); offset-path: path('M0 500Q512 620, 1024 400'); offset-distance: 0; animation: fly 30s infinite var(--state); }
- .pic:nth-of-type(2) { animation-delay: -8s; filter: hue-rotate(60deg); }
- .pic:nth-of-type(3) { animation-delay: -15s; filter: hue-rotate(90deg); }
- @keyframes rot { to { transform: rotate(360deg); } }
- @keyframes fly { to { offset-distance: 100%; } }
- </style>
- <div id="tz" data-lrc="HUACHAO">
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=325583" autoplay loop></audio>
- <img class="pic" alt="" src="https://638183.freep.cn/638183/t22/gif/hudie.gif" />
- <img class="pic" alt="" src="https://638183.freep.cn/638183/t22/gif/hudie.gif" />
- <img class="pic" alt="" src="https://638183.freep.cn/638183/t22/gif/hudie.gif" />
- <div id="player" title="播放/暂停"></div>
- </div>
- <script>
- var curkey = 0, lrcAr = [], all = 5;
- Array.from({length: all}).forEach((c,k) => {
- c = document.createElement('c-c');
- c.style.cssText += `
- //background: #${Math.random().toString(16).substring(2,8)};
- --deg: ${360 / all * k}deg;
- `;
- player.appendChild(c);
- });
- var getAr = (text) => {
- var ar = text.trim().split('\n');
- ar.sort();
- var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
- ar.forEach(item => {
- let result = item.match(reg);
- let tmsg = parseInt(result[1]) * 60 + parseInt(result[2]) + parseInt(result[3]) / 1000;
- lrcAr.push([tmsg, result[4].trim()]);
- });
- };
- var mState = () => {
- tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
- player.title = ['暂停','播放'][+aud.paused];
- };
- aud.onseeked = () => curkey = 0;
- aud.onplaying = aud.onpause = () => mState();
- aud.ontimeupdate = () => {
- if(curkey > lrcAr.length - 1) return;
- if(aud.currentTime >= lrcAr[curkey][0]) {
- tz.dataset.lrc = lrcAr[curkey][1];
- curkey ++;
- }
- };
- player.onclick = () => aud.paused ? aud.play() : aud.pause();
- var lrc = `
- [00:00.600]云朵 - 云朵
- [00:31.778]云朵 - 云朵
- [00:31.778]我一定回来 越过那一片海
- [00:40.507]阿妈呼唤 萦绕耳畔
- [00:50.477]那年我离开像一朵云彩
- [00:58.947]单单的飘向天外
- [01:05.937]风拉着我的衣带
- [01:13.568]像阿妈慈母情怀
- [01:29.228]等着我回来 吻你双鬓洁白
- [01:35.768]向你倾吐 爱以及爱
- [01:46.518]年少读不懂亲人的关怀
- [01:54.900]傻傻的执着未来
- [02:01.808]痴迷在天外的色彩
- [02:10.389]不见你心泪似海
- [02:18.590]你笑着问我要什么
- [02:25.899]我要你紧紧搂着我
- [02:33.439]我就像天上漂泊的云朵
- [02:40.509]飞向天际辽阔
- [02:47.719]我搂着阿妈的爱
- [02:56.599]从此后再不要分开
- [03:04.769]我登上圣洁琉璃的天台
- [03:12.439]还是你的小孩
- [04:14.290]你笑着问我要什么
- [04:21.379]我要你紧紧搂着我
- [04:29.490]我就像天上漂泊的云朵
- [04:37.190]飞向天际辽阔
- [04:44.389]我搂着阿妈的爱
- [04:53.590]从此后再不要分开
- [05:00.790]我登上圣洁琉璃的天台
- [05:08.609]还是你的小孩
- [05:19.479]还是你的小孩
- `;
- getAr(lrc);
- </script>
复制代码
|
评分
-
| 参与人数 2 | 威望 +100 |
金钱 +200 |
经验 +100 |
收起
理由
|
小辣椒
| + 50 |
+ 100 |
+ 50 |
赞一个! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|