【作业贴】晨曦（学习黑师天女散珠加春分小播效果）
<style>#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 680px; background: lightblue url('https://s1.ax1x.com/2023/04/29/p91l7fU.jpg') center/cover no-repeat; box-shadow: 4px 8px 20px #000; position: relative; overflow: hidden;z-index: 1; }#vid {
position: absolute;
width: 100%;
height: 100%;
border-radius: 2%;
opacity: .3;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
}
#mplayer { left: 50%; bottom: 20px; transform: translate(-50%); width: fit-content; height: fit-content; color: tan; position: absolute; }
#mplayer::before, #mplayer::after { position: absolute; content: attr(data-cu); bottom: 16px; }
#mplayer::before { left: 10px; }
#mplayer::after { content: attr(data-du); right: 10px; }
#btn { display: block; margin: auto; mix-blend-mode: multiply;margin-bottom: -5px; width: 80px; height: 80px; border-radius: 50%; cursor: pointer; animation: rot 6s infinite linear var(--state); }
#prog { width: 400px; height: 5px; border: 1px solid tan; border-radius: 5px; display: grid; place-items: center start; position: relative; }
#prog::before, #prog::after { position: absolute; content: ''; cursor: pointer; }
#prog::before { width: var(--ww); height: 5px; border-radius: 5px; background: linear-gradient(to right, pink, green, pink); }
#prog::after { width: 100%; height: 30px; border: 0px solid red; }
.cap { position: absolute; left: calc(var(--ww) - 2px); width: 16px; height: 16px; background: pink; border-radius: 50%; }
.ball {
position: absolute;
width: 24px;
height: 24px;
left:270px;
bottom:350px;
border-radius: 50%;
display: block;
transform-style: preserve-3d;
animation: fly var(--ss) linear infinite alternate var(--state);
}
.ball::before, .ball::after {
position: absolute;
content: '';
width: 24px;
height: 24px;
border-radius: 50%;
left: 30px;
top: 50px;
background: green;
animation: fly calc(var(--ss) + 1s) linear infinite var(--state);
}
.ball::after {
background: red;
animation: fly calc(var(--ss) + 2s) linear infinite var(--state);
}
@keyframes fly {
0% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
50% { opacity: .6; }
100% { transform: translate3d(var(--tx), var(--ty), var(--tz)); opacity: 0; }
}
@keyframes rot { to { transform: rotate(1turn); } }</style>
<div id="papa"><video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/01/83/5b4b08181b572_10s_big.mp4" autoplay="" loop="" muted=""></video> <div id="mplayer" data-du="00:00" data-cu="00:00"><img id="btn" src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/712117d3e4c444c1bba138d736a001a9~tplv-obj:300:301.image?_iz=97245&from=post&x-expires=1690502400&x-signature=oaT7vthQKQtD8LGz%2Fq%2FpT64YfMA%3D" alt="" />
<div id="prog"><span class="cap"></span></div></div></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=453749183" loop="" autoplay="">
</audio><script>(function() {
let canmove = false;
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;};
btn.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mplayer.style.setProperty('--state','running'));
aud.addEventListener('pause', () => mplayer.style.setProperty('--state','paused'));
aud.addEventListener('timeupdate', () => {if(!canmove) prog.style.setProperty('--ww', aud.currentTime * prog.offsetWidth / aud.duration + 'px');mplayer.dataset.cu = toMin(aud.currentTime);mplayer.dataset.du = toMin(aud.duration);});
prog.addEventListener('mousemove', (e) => {if (!canmove) return;let pos = e.offsetX;if (pos < 0) pos = 0;if (pos > prog.offsetWidth) pos = prog.offsetWidth;prog.style.setProperty('--ww', e.offsetX + 'px');});
prog.addEventListener('mousedown', (e) => canmove = true);
prog.addEventListener('mouseup', (e) => {canmove = false;aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;});
document.addEventListener('mouseup', () => canmove = false);
})();</script><script>let total = 160;
let sStr = '';
for(j=0; j<total; j++){
let ww = getNum(20,30);
let bg = `background: linear-gradient(120deg, ${setRgb()}, ${setRgb()}`;
let xx = getNum(-640,640);
let yy = getNum(-384,384) ;
sStr += `<span class="ball" style="--ss: ${getNum(4,10)}s; --tx: ${xx}px; --ty:${yy}px; --tz: ${getNum(10,100)}px; width: ${ww}px; height: ${ww}px; ${bg}"></span>`;
}
prog.innerHTML += sStr;
aud.style.display = 'none';
function setRgb(){ return `rgba(${getNum(0,255)},${getNum(0,255)}, ${getNum(0,255)})`; }
function getNum(min,max){ return Math.floor(Math.random()*(max-min+1))+min; }</script> 周末快乐，听乐开心{:4_187:} 周末愉快！{:6_240:} 醉赏佳作 这个竹子哟个你在这个背景里很漂亮，按钮更漂亮。欣赏月儿好帖{:4_187:} 欣赏学习了！{:4_187:} 纯欣赏，学不会{:4_174:} 效果杠杠的 醉美水芙蓉 发表于 2023-6-3 17:08
樵歌可以搬过来换自己喜欢的图片和视频！
不知怎的搬呀{:4_203:} 真有趣，感谢精彩分享，点赞！{:4_185:} 鱼儿 发表于 2023-6-3 10:53
周末愉快！
鱼儿追剧开心{:4_170:}周末不断更吧应该，没看追剧日历 一斛珠 发表于 2023-6-3 11:02
醉赏佳作
谢谢临贴支持{:4_187:} 红影 发表于 2023-6-3 11:37
这个竹子哟个你在这个背景里很漂亮，按钮更漂亮。欣赏月儿好帖
{:4_199:}有影子一直鼓励，开心 醉美水芙蓉 发表于 2023-6-3 11:46
欣赏月儿好作品！
水芙蓉晚上好，谢谢支持哦{:4_187:} 亦是金 发表于 2023-6-3 12:23
欣赏学习了！
感谢临贴支持{:4_187:} 樵歌 发表于 2023-6-3 13:32
纯欣赏，学不会
谢谢临贴支持{:4_187:} 马黑黑 发表于 2023-6-3 17:03
效果杠杠的
{:4_173:}得老师肯定最开心了 南无月 发表于 2023-6-3 21:19
鱼儿追剧开心周末不断更吧应该，没看追剧日历
不断更，每天两集到18号