Recovery
本帖最后由 马黑黑 于 2023-5-17 12:21 编辑 <br /><br /><style>#papa {margin: 0 0 0 calc(50% - 593px);width: 1024px;height: 640px;background: tan url('https://638183.freep.cn/638183/t23/1/recovery.jpeg') no-repeat center/cover;box-shadow: 0 0 8px 0 #000;position: relative;--state: paused;}
#lrc {--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(80, 70%, 50%, .6));position: absolute;left: 50%;bottom: 20px;transform: translate(-50%);font: bold 2.4em sans-serif;color: hsl(0, 10%, 90%);white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));}
#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards 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">
<css-doodle id="mplayer">
:doodle { @grid: 1x100 / 100px; position: absolute; top: 20px; left: 42%; cursor: pointer; animation: rot 6s infinite linear var(--state); }
background: olive;
@size: 6px;
@place: @plot(r: sin(t/.25););
</css-doodle>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1446860382" autoplay loop></audio>
</div>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
document.head.appendChild(script);
let mKey = 0, mFlag = true;
let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('seeked', () => calcKey());
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
})();
</script> 这好玩，那个播放器按钮好像被图片里的人举着似的{:4_173:} 这个说唱里藏了那么多英文，真不知道图什么，让外国人和中国人都听不懂的意思呗{:4_173:} 红影 发表于 2023-5-17 12:35
这个说唱里藏了那么多英文，真不知道图什么，让外国人和中国人都听不懂的意思呗
说唱乐源于黑人音乐，当时大约叫蓝盾说唱之类的，后称为 rap。由于兴盛于欧美，后跟者深受影响，少不了英文之类的句子。
中国的说唱乐其实有可继承的本土元素，快板呀什么的都是极好的传统的东东，可惜没人去尝试，都跟风了。 红影 发表于 2023-5-17 12:33
这好玩，那个播放器按钮好像被图片里的人举着似的
碰巧吧{:4_170:} 奇特！开洋荤
了{:4_334:} 马黑黑 发表于 2023-5-17 13:04
说唱乐源于黑人音乐，当时大约叫蓝盾说唱之类的，后称为 rap。由于兴盛于欧美，后跟者深受影响，少不了英 ...
跟风也没什么，没必要把语言也弄得一半一半的{:4_173:} 马黑黑 发表于 2023-5-17 13:05
碰巧吧
真的很像的{:4_189:} 欣赏老师的精彩，感谢分享！{:4_187:} 醉美水芙蓉 发表于 2023-5-17 19:10
欣赏黑黑老师精彩音画！
谈不上精彩，一般般吧 红影 发表于 2023-5-17 13:48
真的很像的
碰巧 红影 发表于 2023-5-17 13:47
跟风也没什么，没必要把语言也弄得一半一半的
RAP基本都如此，你看哪一国的都差不多酱紫 马黑黑 发表于 2023-5-17 19:31
碰巧
黑黑真会玩{:4_173:} 马黑黑 发表于 2023-5-17 19:31
RAP基本都如此，你看哪一国的都差不多酱紫
我听过很多纯中文的RAP的。 红影 发表于 2023-5-17 20:17
我听过很多纯中文的RAP的。
都有的 马黑黑 发表于 2023-5-17 21:57
都有的
这个的音质不错。 红影 发表于 2023-5-17 22:29
这个的音质不错。
过得去 马黑黑 发表于 2023-5-17 22:31
过得去
听听歌儿也可以不管歌词的{:4_173:} 红影 发表于 2023-5-18 10:51
听听歌儿也可以不管歌词的
这支歌歌词其实也挺好的
页:
[1]
2