只是太愛你 翻唱 顾-念 TO：素衣
<style>
#papa { margin: auto;left: -400px;width: 1400px; height: 783px;top: 150px;background: url('https://wj.zp68.com/lxx/yunhua/2023/04/14/547.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; box-shadow: 3px 3px 20px #000; display: flex; justify-content: center; overflow: hidden; position: relative; z-index: 1; }
#mplayer { position: absolute; bottom: 50px; left: 150px; width: 240px; height: 80px; user-select: none; display: grid; place-items: center; cursor: pointer; }
#mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
#mplayer:hover #btnwrap { background: linear-gradient(to top right, snow, darkgreen); opacity: 1; }
#btnwrap { fill: lightblue; cursor: pointer; }
#btnwrap:hover { fill: lightgreen; }
#btnwrap, #prog { position: absolute; display: grid; place-items: center; transition: .5s; }
#btnwrap { --yy: -15px; width: 40px; height: 40px; border-radius: 50%; border: 4px solid lightgreen; opacity: 0.1;}
#btnplay { width: 20px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog { --yy:20px;width: 150px; height: 16px;border-radius: 10px; background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,255,0) 100%, transparent 0); border: 1px solid lightgreen; font: normal 14px/16px sans-serif; color: snow; }
#lrc { position: absolute; top: 80px; left: 150px;font: bold 2.4em sans-serif; color: transparent; background: linear-gradient(-90deg, darkgreen, transparent) 0 0 / 200% 200%; filter: drop-shadow(2px 2px 10px ); background-clip: text; -webkit-background-clip: text; text-stroke: 1px lightgreen; -webkit-text-stroke: 1px lightgreen; }
#dt{ position: absolute; width: 217px; height: 140px; top: 330px; left: 1150px; }
#dt1{ position: absolute; width: 32px; height: 32px; top: 300px; left: 352px; }
#mpic {position: absolute; left: 0; top: -30; width: 60px;offset-distance: 0;offset-path: path("M0 40 Q500 180, 600 160 T1300 20");animation: move 8s linear infinite;}
#mpic1 {position: absolute; left: 0; top: -20; width: 200px;offset-distance: 0;offset-path: path("M0 220 Q500 280, 600 160 T504 250");animation: move 8s linear infinite;}
@keyframes bgMove1 { from { background-position: 0 0; } to { background-position: -100% 0; } }
@keyframes bgMove2 { from { background-position: 0 0; } to { background-position: -100% 0; } }
@keyframes move { to { offset-distance: 100%;} }
</style>
<div id="papa">
<img id="mpic" alt="" src="https://wj.zp68.com/lxx/yunhua/2023/04/14/day.gif" />
<img id="mpic1" alt="" src="https://wj.zp68.com/lxx/yunhua/2023/04/14/wrj.png" />
<img id="dt" src="https://wj.zp68.com/lxx/yunhua/2022/09/23/6niao.gif" alt="" />
<img id="dt1" src="https://wj.zp68.com/lxx/yunhua/2023/04/14/xx.jpg" alt="" />
<div id="lrc">HCPlayer</div>
<div id="mplayer">
<div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
<div id="prog">00:00 | 00:00</div>
</div>
</div>
<script>
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let mKey = 0, mFlag = true, aud = new Audio();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.src = 'https://www.joy127.com/url/99000.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {
prog.style.background= 'linear-gradient(90deg,rgba(0,0,0,.45), rgba(0,255,0) ' + aud.currentTime / aud.duration * 100 + '%, transparent 0)';
prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) {
if(mKey === j) showLrc(lrcAr);
else continue;
}
}
});
let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.animationPlayState = 'paused') : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.animationPlayState = 'running');
let showLrc = (time) => {
lrc.style.animation = (mFlag ? 'bgMove1 ' : 'bgMove2 ') + time + 's linear forwards';
lrc.innerHTML = lrcAr;
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 mtime = lrcAr - (aud.currentTime - lrcAr);
showLrc(mtime);
}
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;
}
</script>
<br><br><br><br><br><br><br> @素衣
亲爱的~~~看看这个美女真的太像你了，好久没有看见你了，抱一个{:4_179:} @顾-念
暖男，收到黑黑老师的艾特，第二天准备做的，突然家里有点事拖到今天，见谅啊，晓得你最爱你的小棉袄，就送了{:4_170:}
知道暖男喜欢玩无人机，小辣椒凑一个上去，你看看像不像{:4_189:}
@马黑黑
黑黑任务完成了，最近事多拖了几天才完成，加了个我很喜欢的透明拉条的播放器{:4_173:} 小辣椒 发表于 2023-4-14 20:12
@素衣
亲爱的~~~看看这个美女真的太像你了，好久没有看见你了，抱一个
{:4_179:}真漂亮的礼物，谢谢亲爱的，好久不见 lrc歌词样式很漂亮 小辣椒 发表于 2023-4-14 20:15
@顾-念
暖男，收到黑黑老师的艾特，第二天准备做的，突然家里有点事拖到今天，见谅啊，晓得你最爱你的 ...
确实很像素衣，哈哈
小辣椒很细心，温暖的一个人。
我和素老师 谢谢你，春安！ 小辣椒 发表于 2023-4-14 20:17
@马黑黑
黑黑任务完成了，最近事多拖了几天才完成，加了个我很喜欢的透明拉条的播放器
整体很完美 素衣 发表于 2023-4-14 20:29
真漂亮的礼物，谢谢亲爱的，好久不见
我就最近没有上来，你身体怎么样，好久没有看见了{:4_185:} 马黑黑 发表于 2023-4-14 20:34
lrc歌词样式很漂亮
谢谢黑黑，作业拖了这么久{:4_197:} 顾-念 发表于 2023-4-14 20:34
确实很像素衣，哈哈
小辣椒很细心，温暖的一个人。
暖男，这个是太像你的小棉袄了，我看见这图就立马用上了{:4_173:} 马黑黑 发表于 2023-4-14 20:34
整体很完美
顾念喜欢无人机，我就想做个这种类型的 小辣椒 发表于 2023-4-14 20:43
暖男，这个是太像你的小棉袄了，我看见这图就立马用上了
那下回有像我的，你用上，哈哈 顾-念 发表于 2023-4-14 20:34
确实很像素衣，哈哈
小辣椒很细心，温暖的一个人。
千万别客气，只是我匆匆忙忙完成，但还是有点事先下了 小辣椒 发表于 2023-4-14 20:46
千万别客气，只是我匆匆忙忙完成，但还是有点事先下了
跟你不客气，去忙吧，周末快乐！ 很美，好看，欣赏问好！{:4_204:} 小辣椒 发表于 2023-4-14 20:44
顾念喜欢无人机，我就想做个这种类型的
考虑周到 小辣椒 发表于 2023-4-14 20:42
谢谢黑黑，作业拖了这么久
理解的 无人机也来了啊，太漂亮了 听出来了真的很爱{:4_173:}