海浪
<style>#papa {
margin: 80px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
box-shadow: 3px 3px 20px #000;
position: relative;
display: grid;
place-items: center;
z-index: 1;
}
#canv {
position: absolute;
display: block;
box-shadow: 3px 3px 20px #000;
position: relative;
cursor: pointer;
z-index: 2;
}
#vid { display: none; }
#mypic {
width: 120px;
height: 120px;
position: absolute;
top: 5px;
right: 24px;
border-radius: 50%;
cursor: pointer;
z-index: 3;
animation: rot 3s infinite linear var(--state);
--state: paused;
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<canvas id="canv"></canvas>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1863644252" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2405811/00/02/03/5b4f10264b2c3.mp4" autoplay loop muted></video>
<img id="mypic" src="https://638183.freep.cn/638183/t23/1/fgyj.png" alt="" />
</div>
<script>
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {
ctx.drawImage(vid, 0, 0, ww, hh);
if(!vid.paused) {
requestAnimationFrame(loop);
return;
}
}
let mState = () => aud.paused ? (mypic.style.setProperty('--state', 'paused'), vid.pause()) : (mypic.style.setProperty('--state', 'running'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mypic.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>
卷 {:5_106:} 起个网名好难 发表于 2023-3-16 08:20
卷
内卷 马黑黑 发表于 2023-3-16 08:28
内卷
https://img.duoziwang.com/2019/02/04171336292318.jpg 天啊，这个播放器小图标像是被海浪驱动的呢，神奇的错觉{:4_187:} 这个暂停播放器音乐后，连视频也一起暂停了。画布控制真的神奇。对这样大的动态效果，更觉得非常厉害{:4_199:} 内卷是发展的阻碍 这个才是汹涌澎湃的。 庶民 发表于 2023-3-16 10:38
这个才是汹涌澎湃的。
{:4_181:} 红影 发表于 2023-3-16 09:01
天啊，这个播放器小图标像是被海浪驱动的呢，神奇的错觉
是错觉 红影 发表于 2023-3-16 09:03
这个暂停播放器音乐后，连视频也一起暂停了。画布控制真的神奇。对这样大的动态效果，更觉得非常厉害{:4_19 ...
直接控制视频也是可以的 阿狄丽娜 发表于 2023-3-16 09:24
内卷是发展的阻碍
但它是个体无奈之举 马黑黑 发表于 2023-3-16 12:19
是错觉
加了这么播放器带来的错句，让这个帖子特别奇妙{:4_187:} 马黑黑 发表于 2023-3-16 12:20
直接控制视频也是可以的
那波浪太大了，我看着头晕{:4_189:} 这是要视频制作吗黑黑 打开白的想怎么没有东西，点击那些刺猬一样的小圆，凶涛骇浪出来了{:4_199:} 小辣椒 发表于 2023-3-16 16:44
打开白的想怎么没有东西，点击那些刺猬一样的小圆，凶涛骇浪出来了
可能加载慢。俺这是毫秒开。 红影 发表于 2023-3-16 15:31
那波浪太大了，我看着头晕
看样纸你会晕船 红影 发表于 2023-3-16 15:30
加了这么播放器带来的错句，让这个帖子特别奇妙
形状与运动节奏，掌握好这个就行 小海螺漂亮，转得挺晕的{:4_170:}