请千羽喝杯下午茶（黑师春分桃花小播效果）
<style>#papa { margin: -80px 0 0 calc(50% - 593px);width: 1024px; height: 680px; background: lightblue url('https://pic.imgdb.cn/item/641edc90a682492fcce38c30.gif') center/cover no-repeat; box-shadow: 4px 8px 20px #000; position: relative; z-index: 1; }
#vid {
position: absolute;
width: 100%;
height: 100%;
border-radius: 2%;
opacity: .3;
object-fit: cover;
pointer-events: none;
}
#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; margin-bottom: -5px; width: 100px; height: 100px; 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%; }
.pic { position: absolute; left: 20%; top: 80%; width: 80px; border-radius: 50%; mix-blend-mode: multiply; filter: blur(1px) opacity(.6); }
@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> <img class="pic" src="https://638183.freep.cn/638183/t22/gif/goldfish.gif" alt="" /><div id="mplayer" data-du="00:00" data-cu="00:00"><img id="btn" src="https://pic.imgdb.cn/item/641edde3a682492fcce78a66.png" alt="" /><div id="prog"><span class="cap"></span></div></div></div><audio id="aud" src="https://music.163.com/song/media/outer/url?id=1384026889" 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> @千羽 不是回礼贴不是谢贴，一起喝茶吃点心{:4_170:} 这个也是黑黑老师的春分桃花小播，和你同款{:4_170:} 咱们就不谢来谢去的客气了哈{:4_183:} 喝下午茶吗，飞快跑来了{:4_187:}{:4_173:} 悄然把桃花改成了玫瑰花，挺好的{:4_187:} 千羽 发表于 2023-3-26 20:29
悄然把桃花改成了玫瑰花，挺好的
亲爱的，这是小点心{:4_170:} 都是花样的漂亮小点心，工艺品一般，真是不舍得吃呢{:4_203:} 千羽 发表于 2023-3-26 20:28
喝下午茶吗，飞快跑来了
{:4_170:}虽然这个下午有点迟，难得有空哈 千羽 发表于 2023-3-26 20:31
都是花样的漂亮小点心，工艺品一般，真是不舍得吃呢
{:4_170:}放心吃，爱它就吃了它 缓缓飘落的花瓣，营造了浪漫的氛围……看着也开心{:4_173:} 雨中悄然 发表于 2023-3-26 20:24
咱们就不谢来谢去的客气了哈
好的：悄然，俺刚才喝了香浓的咖啡，不谢了哦{:4_173:} 雨中悄然 发表于 2023-3-26 20:32
放心吃，爱它就吃了它
哈哈{:4_173:} 千羽 发表于 2023-3-26 20:33
缓缓飘落的花瓣，营造了浪漫的氛围……看着也开心
{:4_187:}你开心我最高兴啦 千羽 发表于 2023-3-26 20:36
好的：悄然，俺刚才喝了香浓的咖啡，不谢了哦
就是这样，{:4_181:} 雨中悄然 发表于 2023-3-26 20:31
虽然这个下午有点迟，难得有空哈
来喝咖啡还是有空的{:4_189:} 雨中悄然 发表于 2023-3-26 20:37
你开心我最高兴啦
嗯，一起开心{:4_185:} 雨中悄然 发表于 2023-3-26 20:30
亲爱的，这是小点心
哈哈，玲珑精致的小点心，不舍得吃{:4_205:} 千羽 发表于 2023-3-26 20:38
来喝咖啡还是有空的
{:4_187:}太好了，没有比这个更好的了 千羽 发表于 2023-3-26 20:42
哈哈，玲珑精致的小点心，不舍得吃
千羽好温柔，你还真是性情中人。{:4_173:}