云朵，云朵
本帖最后由 福宝 于 2024-6-21 16:45 编辑 <br /><br /><style>#tz { margin: 30px auto 0;left: -280px;top:100px; width: 1500px; height: 1500px;background: url('https://gd-hbimg.huaban.com/c7a7b50d3d9008b45f633af61236431231d904777b2d6-vdGLTi') no-repeat top -100px 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: 230px;
position: absolute;
right: 150px; top: 150px;
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;
width: calc(var(--size) / 6);
height: calc(var(--size) / 6);
border-radius: 50%;
background: rgba(0,128,44,.35);
}
#player:hover { filter: hue-rotate(180deg) drop-shadow(0 0 4px yellow); }
c-c { position: absolute;
content:url('https://gd-hbimg.huaban.com/c69d40ec92cf8a888cee49147442ea0b972c400e20227-4jfYuM');
width: calc(var(--size) / 1);
height: calc(var(--size) / 1);
border-radius: 100%;
background: rgba(255,255,255,.07);
transform: rotate(var(--deg))
translate(calc(var(--size) / 4)); }
.pic { position: absolute; top: 0; left: 0; width: 65px; transform: rotate(180deg); offset-path: path('M0 500Q512 620, 1250 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="YUNDUO">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=325583" autoplay loop></audio>
<img class="pic" alt="" src="https://gd-hbimg.huaban.com/9a5c9ce47892068aca5bccb41ab5503cd8b7d9b9164ac-q1tggA" />
<img class="pic" alt="" src="https://gd-hbimg.huaban.com/9a5c9ce47892068aca5bccb41ab5503cd8b7d9b9164ac-q1tggA" />
<img class="pic" alt="" src="https://gd-hbimg.huaban.com/9a5c9ce47892068aca5bccb41ab5503cd8b7d9b9164ac-q1tggA" />
<div id="player" title="播放/暂停"></div>
</div>
<script>
var curkey = 0, lrcAr = [], all = 1;
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) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.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) {
tz.dataset.lrc = lrcAr;
curkey ++;
}
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();
var lrc = `
云朵 - 云朵
云朵 - 云朵
我一定回来 越过那一片海
阿妈呼唤 萦绕耳畔
那年我离开像一朵云彩
单单的飘向天外
风拉着我的衣带
像阿妈慈母情怀
等着我回来 吻你双鬓洁白
向你倾吐 爱以及爱
年少读不懂亲人的关怀
傻傻的执着未来
痴迷在天外的色彩
不见你心泪似海
你笑着问我要什么
我要你紧紧搂着我
我就像天上漂泊的云朵
飞向天际辽阔
我搂着阿妈的爱
从此后再不要分开
我登上圣洁琉璃的天台
还是你的小孩
你笑着问我要什么
我要你紧紧搂着我
我就像天上漂泊的云朵
飞向天际辽阔
我搂着阿妈的爱
从此后再不要分开
我登上圣洁琉璃的天台
还是你的小孩
还是你的小孩
`;
getAr(lrc);
</script>
<br><br><br><br>
漂亮漂亮 {:9001:}{:9001:}{:9001:}尴尬 青海湖的水真好！ {:10_403:}谢谢大佬临帖 （凡哥代码），学习编译 {:9017:}好美啊 呀，标题看着很亲切呢，哈哈
页:
[1]