带着音乐去旅行 TO：亦是金
<style>
#papa { margin: auto;left: -260px;width: 1117px; height: 647px;top: 100px;background: url('https://xlaj.cn/assets/file/zp/20230503195607.gif') 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: 40px; left: 650px; 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; }
.star5 { position: absolute; background: transparent; top: -35px; left: -197px; font: normal 16px /16px sans-serif; offset-distance: 0%; offset-path: path("m458.5,354c0,0 -10,-3 -10.5,-3c0.5,0 -5.5,9 -6,9c0.5,0 3.5,12 3,12c0.5,0 14.5,6 14,6c0.5,0 18.5,-4 18,-4c0.5,0 16.5,-13 16,-13c0.5,0 8.5,-18 8,-18c0.5,0 -1.5,-19 -2,-19c0.5,0 -12.5,-24 -13,-24c0.5,0 -113.5,-121 -114,-121c0.5,0 -24.5,-41 -25,-41c0.5,0 2.5,-22 2,-22c0.5,0 8.5,-6 8,-6c0.5,0 14.5,1 14,1c0.5,0 10.5,14 10,14c0.5,0 2.5,23 2,23c0.5,0 -4.5,76 -5,76c0.5,0 -1.5,31 -2,31c0.5,0 17.5,24 17.5,25c0,1 27,9 26.5,9c0.5,0 31.5,-8 31,-8c0.5,0 23.5,-33 23,-33c0.5,0 0.5,-30 0,-30c0.5,0 -27.5,-12 -28,-12c0.5,0 -24.5,2 -25,2c0.5,0 -23.5,26 -24,26c0.5,0 4.5,16 4,16c0.5,0 19.5,18 19,18"); text-shadow: 0 0 12px rgba(199,245,122,.75); animation: move 18s var(--ss) linear infinite; }
#dt{ position: absolute; width: 250px; height: 100px; top: 120px; left: 452px; }
#dt1{ position: absolute; width: 60px; height: 49px; top: 300px; left: 150px; }
@keyframes move { to { offset-distance: 100%;} }
</style>
<div id="papa">
<img id="dt" src="https://xlaj.cn/assets/file/zp/20230503195727.png" alt="" />
<img id="dt1" src="https://xlaj.cn/assets/file/zp/20230503195641.gif" 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 mKey = 0, mFlag = true, aud = new Audio();
let setColor = () => Math.random().toString(16).substr(-6);
Array.from({length: 1}).forEach((ele,key) => {
ele = document.createElement('span');
ele.className = 'star5';
ele.innerText = '\u2734';
ele.style.cssText += `--ss: ${key * 0.5}s; color: #dc3700;`;
papa.appendChild(ele);
});
aud.src = 'https://xlaj.cn/assets/file/zp/20230426194536.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
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> @亦是金 这个有路径效果我本来不想发的，感觉路径背景单调，是按亦是金老师帖里面的教程做的，做的不够完美 做这个路径让我知道可以直接修改起始点就可以随便移动，我这个路径效果换过2次图片的，开始图是1400的，后来发现路径太小，和图不相配，就重新做了图，后来发现路径太单调就一直没有发。刚才亦是金老师让我发，我就发了。。。。。我自己感觉不够满意的{:4_170:} 欣赏老师的精彩分享，点赞问好！{:4_204:} 谢谢亦是金老师的路径制作分享 梦缘 发表于 2023-5-3 20:16
欣赏老师的精彩分享，点赞问好！
谢谢梦缘欣赏。晚上好~~{:4_171:} 小辣椒有骆驼
请问详子是谁{:4_189:} 辫子哥哥 发表于 2023-5-3 20:28
小辣椒有骆驼
请问详子是谁
是你，是你，就是你{:4_170:} 好美的大漠风光。亲爱的好制作。亦是金老师收礼开心{:4_187:} 红影 发表于 2023-5-3 20:38
好美的大漠风光。亲爱的好制作。亦是金老师收礼开心
亲爱的，这个路径就是亦是金老师分享的，我感觉单调一点，一直没有发，刚才说起他让我发了看看，我就献丑了 这个骆驼队做得太棒了。 小辣椒 发表于 2023-5-3 20:10
做这个路径让我知道可以直接修改起始点就可以随便移动，我这个路径效果换过2次图片的，开始图是1400的，后 ...
完美！漂亮！欣赏学习了！{:4_187:}{:4_199:}{:4_199:}{:4_199:} 小辣椒 发表于 2023-5-3 20:17
谢谢亦是金老师的路径制作分享
客气了！向你学习！{:4_187:} 梦油 发表于 2023-5-3 21:10
这个骆驼队做得太棒了。
谢谢梦油欣赏，这个是个动图 小辣椒 发表于 2023-5-3 20:05
@亦是金
谢谢小辣椒！开心！！！{:4_185:} 亦是金 发表于 2023-5-3 21:23
完美！漂亮！欣赏学习了！
怎么还完美啊，说实话这个路径比较单调的 亦是金 发表于 2023-5-3 21:24
客气了！向你学习！
应该想你学习才对啊{:4_187:} 前面带路的谁呢{:4_170:} 亦是金 发表于 2023-5-3 21:27
谢谢小辣椒！开心！！！
千万别客气啊，向前辈学习的{:4_187:}