情人节预热一下
<style>
#papa { left: -250px; width: 1100px; height: 700px; background: #ccc url('https://pic.imgdb.cn/item/63e632884757feff337771eb.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; z-index: 1; }
#mplayer { position: absolute; bottom: 0; width: 300px; 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, purple, orange); border-radius: 50%; opacity: .75; }
#btnwrap, #prog { position: absolute; display: grid; place-items: center; transition: .5s; }
#btnwrap { --yy: -15px; width: 40px; height: 40px; transform: rotate(45deg); border: 1px solid tan; border-radius: 6px; opacity: 0; }
#btnplay { width: 20px; height: 20px; transform: translateX(3px); 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: 300px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, orange, purple 100%, transparent 0); border: 1px solid tan; font: normal 14px / 16px sans-serif; color: #fff; text-shadow: 1px 1px 0 #000; opacity: .8; }
.star5 { position: absolute; background: transparent; top: -130px; left: -90px; font: normal 12px /12px sans-serif; offset-distance: 0%; offset-path: path("m578.5,279c0,0 3,28 2.5,28c0.5,0 24.5,22 24,22c0.5,0 -6.5,20 -7,20c0.5,0 32.5,35 32,35c0.5,0 -4.5,-41 -5,-41c0.5,0 16.5,4 16,4c0.5,0 16.5,-66 16,-66c0.5,0 18.5,-8 18,-8c0.5,0 13.5,29 14.5,29c1,0 18,11 17.5,11c0.5,0 -19.5,135 -20,135c0.5,0 -18.5,-1 -17.5,-1c1,0 -5,32 -5.5,32c0.5,0 -24.5,-5 -25,-5c0.5,0 -119.5,-89 -120,-89c0.5,0 3.5,-30 3,-30c0.5,0 -8.5,-23 -9,-23c0.5,0 -30.5,-1 -31,-1c0.5,0 -34.5,-21 -35,-21c0.5,0 -22.5,-2 -23,-2c0.5,0 -27.5,-14 -28,-14c0.5,0 6.5,42 6,42c0.5,0 23.5,59 23,59c0.5,0 20.5,8 20,8c0.5,0 24.5,-1 24,-1c0.5,0 19.5,20 19,20c0.5,0 47.5,38 47,38c0.5,0 66.5,40 66,40c0.5,0 63.5,49 63,49c0.5,0 -4.5,18 -5,18c0.5,0 24.5,19 24,19c0.5,0 15.5,8 15,8c0.5,0 -4.5,29 -5,29"); text-shadow: 0 0 12px rgba(199,245,122,.75); animation: move 18s var(--ss) linear infinite; }
@keyframes move{to{offset-distance:100%}}
</style>
<div id="papa">
<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: 40}).forEach((ele,key) => {
ele = document.createElement('span');
ele.className = 'star5';
ele.innerText = '\u2764';
ele.style.cssText += `--ss: ${key * 0.5}s; color: #F70938;`;
papa.appendChild(ele);
});
aud.src = 'http://music.163.com/song/media/outer/url?id=5234488.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('timeupdate', () => {
prog.style.background = 'linear-gradient(90deg, orange, purple ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';
prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
});
let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
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> 呀，这个迷宫心形厉害了，本来看着小星星出来，我还等着它们钻到死胡同里呢，结果它们就那么顺畅地走下来了{:4_199:} 另外半边的心咋不走了，我还在另半边上看了半天，看看有没有出路{:4_170:} 爱的迷宫，这个做得漂亮。欣赏清舟好帖{:4_199:} 红影 发表于 2023-2-10 21:03
另外半边的心咋不走了，我还在另半边上看了半天，看看有没有出路
好象只有一条路的了 赞！代码高手一出手就超级惊艳。
小心心还可以玩迷宫{:4_187:}
太神奇 了 红影 发表于 2023-2-10 21:08
爱的迷宫，这个做得漂亮。欣赏清舟好帖
谢谢影搜素材看到这个心形迷宫想到这个效果了 雨中悄然 发表于 2023-2-10 21:18
赞！代码高手一出手就超级惊艳。
小心心还可以玩迷宫
太神奇 了
这个马以前有个贴的 绿叶清舟 发表于 2023-2-10 21:26
这个马以前有个贴的
厉害之极{:4_187:} 心似迷宫出不去{:4_173:}
先预热，难不成到时准备干票大的{:4_170:} 樵歌 发表于 2023-2-10 21:28
心似迷宫出不去
先预热，难不成到时准备干票大的
到时直接抢人了{:4_189:} 看看热得怎么样 清舟这个太有趣了。特别好玩，这个情人做的迷宫{:4_170:} 我们在欣赏的同时得到一种享受。 欣赏老师佳作！ 绿叶清舟 发表于 2023-2-10 21:33
到时直接抢人了
果断，好，要帮手吗{:4_173:} 樵歌 发表于 2023-2-11 14:08
果断，好，要帮手吗
要，扎腿捆手的还没叫齐{:4_189:} 醉美水芙蓉 发表于 2023-2-11 12:00
清舟美女这个迷宫特效做得漂亮！
谢谢芙蓉 海笑 发表于 2023-2-11 10:39
欣赏老师佳作！
谢谢海笑支持