本帖最后由 凡哥 于 2024-6-20 13:09 编辑
2024年6月20日 星期四
<style>
#tz { margin: 30px auto 0; 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>
| 
发表于 2024-6-20 20:09
