左手指月（学习黑师月落心形播放效果）
<style>
#papa { margin: -8px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: gray url('https://s1.ax1x.com/2023/03/22/ppdZTWd.jpg') center/cover no-repeat; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; --state: running; }
#mypic {
position: absolute;
right: 10px;
top: 1px;
}
#vid {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: .5;
object-fit: cover;
pointer-events: none;
}
#lrc { --motion: cover2; --tt: 1s; position: absolute; left: 20px; bottom: 20px; font: bold 2.4em sans-serif; color: hsl(100, 100%, 90%); white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 100%, 0%, .85)); z-index: 900; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: linear-gradient(180deg, hsla(0, 10%, 50%, .75), hsla(200, 100%, 20%, .65)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
#mplayer { position: absolute; width: 100px; height: 100px; border-radius: 50%; box-shadow: 15px 15px 0 snow; --delay: 0s; }
#mplayer::before, #mplayer::after { position: absolute; content: ''; width: 100px; height: 100px; background: url('https://638183.freep.cn/638183/t23/1/heart_133236768103332344.png') 0 0 no-repeat; cursor: pointer; animation: chgBg 1s steps(29,jump-none) infinite var(--delay) var(--state); }
#mplayer::after {--delay: .5s;bottom: -270px;left: 430px;}
@keyframes chgBg { to { background-position: 100%; } }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<div id="papa"><div id="lrc" data-lrc="HCPlayer">HCPlayer</div><img id="mypic" src="https://pic.imgdb.cn/item/6419b281a682492fccc921dd.gif" alt="" /><div id="mplayer"><video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/02/29/5b54a304deb3e_10s_big.mp4" autoplay="" loop="" muted=""></video></div><audio id="aud" src="https://music.163.com/song/media/outer/url?id=1963032664" autoplay loop></audio></div>
<script>
(function() {
let mKey = 0, mFlag = true;
let lrcTime = (ar) => {let tmpAr = [];for(j = 0; j <ar.length - 1; j ++) {if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));}let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item,key) => {ar = item > aver ? aver : item;});return ar;};
let averAdd = 0, offset = 0;
let getLrcAr = (text) => {let lrcAr = [];let calcRule = ;for(x of text.split('\n')) {let ar = [];let re = /\d+[\.:]\d+([\.:]\d+)?/g;let geci = x.replace(re,'');if(geci) {geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');let time = x.match(re);if(time != null) {for(y of time) {let tmp = y.match(/\d+/g);let sec = 0;for(z in tmp) sec += tmp * calcRule;ar = ;lrcAr.push(ar); }}}}lrcAr.sort((a,b)=> a - b);return(lrcTime(lrcAr));}
let geci = `《左手指月》
演唱：萨顶顶
作词：喻江
作曲：萨顶顶
歌词编辑：孟德良
2019年11月25日
左手握大地 右手握着天
掌纹裂出了 十方的闪电
把时光匆匆 兑换成了年
三千世 如所不见
左手拈着花 右手舞着剑
眉间落下了 一万年的雪
一滴泪 啊啊啊
那是我 啊啊啊
(Music)
左手一弹指 右手弹着弦
舟楫摆渡在 忘川的水间
当烦恼能开出 一朵红莲
莫停歇 给我杂念
左手指着月 右手取红线
赐予你和我 如愿的情缘
月光中 啊啊啊
你和我 啊啊啊
(Music)
左手化成羽 右手成鳞片
某世在云上 某世在林间
愿随你 用一粒微尘 的模样
在所有尘世 浮现
我左手拿起你 右手放下你
合掌时 你全部 被收回心间
一炷香 啊啊啊
你是我 无二无别
(The end)www.lrcgeci.com ★
☆谢谢欣赏☆
`;
let lrcAr = getLrcAr(geci);
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);};
let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;}
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script>
@马黑黑 交份作业。用了你的 头像做张小图{:4_170:} 哈哈哈！看见光芒万丈的黑黑老师了！帅！！！好帖！{:4_187:} 亦是金 发表于 2023-3-22 19:39
哈哈哈！看见光芒万丈的黑黑老师了！帅！！！好帖！
{:5_109:} 雨中悄然 发表于 2023-3-22 19:19
@马黑黑 交份作业。用了你的 头像做张小图
100√ 把心玩到极致{:4_170:} 马黑黑 发表于 2023-3-22 19:44
{:4_191:} 亦是金 发表于 2023-3-22 19:53
干了 悄然好制作，一下子三颗心的{:4_199:} 先去看看黑黑的教程 这个构思巧妙。悄然的帖子总是很动脑筋的，点赞{:4_199:} 红影 发表于 2023-3-22 23:19
这个构思巧妙。悄然的帖子总是很动脑筋的，点赞
谢谢影宝，图片挺漂亮就想用上了 小辣椒 发表于 2023-3-22 20:40
先去看看黑黑的教程
{:4_187:}好哒 小辣椒 发表于 2023-3-22 20:38
悄然好制作，一下子三颗心的
{:4_187:}我也数了一下{:4_170:} 马黑黑 发表于 2023-3-22 20:38
干了
喝上了 马黑黑 发表于 2023-3-22 19:45
把心玩到极致
咦，这么说好象心形元素是挺多的 马黑黑 发表于 2023-3-22 19:45
100√
谢谢黑老师打分。下回打个60就好了{:4_170:} 亦是金 发表于 2023-3-22 19:39
哈哈哈！看见光芒万丈的黑黑老师了！帅！！！好帖！
谢谢临贴支持，谢谢回复{:4_187:} 雨中悄然 发表于 2023-3-23 17:53
谢谢黑老师打分。下回打个60就好了
不到80分要补考的 雨中悄然 发表于 2023-3-23 17:52
咦，这么说好象心形元素是挺多的
没错