肩上的云
本帖最后由 东篱闲人 于 2022-10-5 19:09 编辑 <br /><br /><style>#papa { left: -400px; width: 1400px; height: 800px; background: #ccc url('https://s1.ax1x.com/2022/10/04/xllSG6.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: 700px; 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=1895376991.mp3" autoplay= "autoplay"></audio>
<script>
let mKey = 0, mFlag = true;
let lrcAr =[['0.00', ' 作词 : 周兵',1000],
['1.00', ' 作曲 : 陈伟',1000],
['2.00', ' 编曲 : 冯丹',1000],
['3.00', ' 编辑 : 东篱闲人',27220],
['30.22', '风起的时候我好想你',6469],
['36.69', '多想陪你走过四季',6270],
['42.96', '那段爱情还留在心底',6850],
['49.81', '沉默的像身边的空气',6509],
['56.32', '飘雨的时候你在哪里',6579],
['62.90', '望穿秋水不露痕迹',6419],
['69.32', '只有那片蓝色的天空',6460],
['75.78', '它曾看过我们的甜蜜',5500],
['81.28', '你是落在我肩上的云',6500],
['87.78', '随风飘飘成相思的雨',6390],
['94.17', '掌心里还留着你的情',6629],
['100.80', '却像花瓣般散落一地',6519],
['107.32', '你是落在我肩上的云',6400],
['113.72', '随风飘飘吹来了回忆',6540],
['120.26', '看那往事在心里堆积',6399],
['126.66', '从此只剩我一个人孤寂',12439],
['139.10', '',20870],
['159.97', '飘雨的时候你在哪里',6530],
['166.50', '望穿秋水不露痕迹',6569],
['173.07', '只有那片蓝色的天空',6490],
['179.56', '它曾看过我们的甜蜜',5539],
['185.10', '你是落在我肩上的云',6180],
['191.28', '随风飘飘成相思的雨',6780],
['198.06', '掌心里还留着你的情',6560],
['204.62', '却像花瓣般散落一地',6500],
['211.12', '你是落在我肩上的云',6129],
['217.25', '随风飘飘吹来了回忆',7120],
['224.37', '看那往事在心里堆积',6139],
['230.51', '从此只剩我一个人孤寂',6680],
['237.19', '从此只剩我一个人孤寂',10250],
['247.44', '',1831],
['249.27', ' 吉他 : 牛侠',2228],
['251.50', ' 小提琴 : 李朋',2228],
['253.73', ' 混音 : 阿健',2227],
['255.96', ' 发行 : 壹歌传媒',2228],
['258.18', ' 出品人 : 王峰',3000]]
;
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 + 'ms');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
</script>
沙发我的 眼前一亮，这还是那个老头作品吗？ 小辣椒 发表于 2022-10-4 21:04
沙发我的
师傅听着柔情不？{:5_117:} 豆儿 发表于 2022-10-4 21:10
眼前一亮，这还是那个老头作品吗？
不一样了吗？{:5_115:} 挺好听的。制作漂亮。{:4_199:} 东篱闲人 发表于 2022-10-4 21:11
不一样了吗？
那绝对，印象中你很少用亮色的 加林森 发表于 2022-10-4 21:12
挺好听的。制作漂亮。
嗯嗯，不学习不行啊。。。。{:5_117:} 豆儿 发表于 2022-10-4 21:13
那绝对，印象中你很少用亮色的
嗯嗯，你了解俺。。。{:5_116:} 东篱闲人 发表于 2022-10-4 21:13
嗯嗯，不学习不行啊。。。。
对头，我都掉队了。{:5_102:} 加林森 发表于 2022-10-4 21:15
对头，我都掉队了。
别闹，你是走在时代前沿的人。。。{:4_186:} 东篱闲人 发表于 2022-10-4 21:11
师傅听着柔情不？
老头我已经习惯你的柔情了{:4_170:} 小辣椒 发表于 2022-10-4 21:20
老头我已经习惯你的柔情了
俺的柔情，师傅懂。。。。。{:5_117:} 欣赏音画佳作！一图一歌一同步歌词，就是一好帖！学习！ 这女子肩上有那么长的飘带，云能落上去么{:4_173:} 相约爱晚亭 发表于 2022-10-4 21:30
欣赏音画佳作！一图一歌一同步歌词，就是一好帖！学习！
{:4_180:} 红影 发表于 2022-10-4 21:30
这女子肩上有那么长的飘带，云能落上去么
正好把云拴住。。。。 云还没有落到肩上。。{:4_173:} 百听不厌。。{:4_204:}{:4_204:}