爱上你注定爱上寂寞
本帖最后由 东篱闲人 于 2022-10-17 22:30 编辑 <br /><br /><style>#papa { left: -400px; width: 1400px; height: 800px; background: #ccc url('https://pic1.imgdb.cn/item/634caac416f2c2beb15891a6.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; user-select: none; position: relative; z-index: 1; }
#mplayer { position: absolute; width: 1px; height: 1px; left: 20px; top: 20px; border-radius: 50%; background: conic-gradient(hsla(0,100%,50%,.7),hsla(120,100%,50%,.7),hsla(240,100%,50%,.7),hsla(300,100%,50%,.7)); mask: radial-gradient(transparent 3px,red 0); -webkit-mask: radial-gradient(transparent 3px,red 0); cursor: pointer; animation: rot 4s linear infinite; animation-play-state: paused; }
#lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; top: 615px; 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)); } #lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(120,85%,40%,.75),hsla(0,70%,50%,.65)); 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(360deg); } }
</style>
<div id="papa">
<img src="" alt="" style="position: absolute; left: 25px; top: 8px; mix-blend-mode: multiply;" />
<div id="lrc" data-lrc="爱上你注定爱上寂寞">爱上你注定爱上寂寞</div>
<div id="mplayer"></div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=1894345405.mp3" autoplay= "autoplay"></audio>
<script>
let mKey = 0, mFlag = true;
let lrcAr =[,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
]
;
aud.loop = false;
mplayer.onclick = () => {
aud.paused ? aud.play() : aud.pause();
}
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('ended', () => { mKey = 0; aud.play(); });
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
let mState = () => aud.paused ? (mplayer.style.animationPlayState = 'paused', lrc.style.setProperty('--state', 'paused')) : (mplayer.style.animationPlayState = 'running', lrc.style.setProperty('--state', 'running'));
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
</script>
欣赏、点赞!
非常漂亮的制作，东篱大哥的图图总是做得那么漂亮{:4_187:} 爱了个寂寞，这歌真悲催{:4_173:} 欣赏精美音画佳作！ 东篱朋友早晨好！这幅作品的画面简洁，但构思很巧妙，给人耳目一新的感觉。 起个网名好难 发表于 2022-10-17 09:43
欣赏、点赞!
{:4_190:} 红影 发表于 2022-10-17 10:11
爱了个寂寞，这歌真悲催
看眼神。。。。{:5_117:} 相约爱晚亭 发表于 2022-10-17 10:15
欣赏精美音画佳作！
{:4_190:} 梦油 发表于 2022-10-17 10:31
东篱朋友早晨好！这幅作品的画面简洁，但构思很巧妙，给人耳目一新的感觉。
主要是眼神太忧郁了。。。 东篱闲人 发表于 2022-10-17 10:56
s -> ms 老头这个标题字特别特别漂亮{:4_178:} 打开帖先被图图惊艳到了，老头走柔情道路肯定没错，而且美女稍带忧愁更加楚楚动人{:4_189:} 呼叫黑黑@马黑黑
昨天你记挂老头，有心灵感应吧，今天出现了，队长今天中午也是出院了。 小辣椒 发表于 2022-10-17 12:14
呼叫黑黑@马黑黑
昨天你记挂老头，有心灵感应吧，今天出现了，队长今天中午也是出院了。
都完好无损吧{:4_173:} 原来东篱爱上了寂寞，沉寂了几天，寂寞了几天 马黑黑 发表于 2022-10-17 12:15
都完好无损吧
黑黑，现在住医院，家属不能陪，要核酸检查也是麻烦，估计队长自己也是急着回家 小辣椒 发表于 2022-10-17 12:20
黑黑，现在住医院，家属不能陪，要核酸检查也是麻烦，估计队长自己也是急着回家
嗯嗯，很麻烦的 东篱闲人 发表于 2022-10-17 10:56
看眼神。。。。
没看出来，她戴美瞳了？{:4_173:}