惊蛰

马黑黑 · 发表于 2023-3-7 12:37

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2023-3-7 12:38

帖子代码

<style>
#papa {
margin: -80px 0 0 calc(50% - 621px);
width: 1080px;
height: 720px;
background: #AEB1A8 url('https://638183.freep.cn/638183/t23/1/jkve.jpeg') center/cover no-repeat;
box-shadow: 3px 3px 20px #000;
position: relative;
display: grid;
place-items: center;
z-index: 1;
}
#mplayer {
--state: paused;
position: absolute;
bottom: 10px;
width: 169px;
height: 155px;
cursor: pointer;
border-radius: 50%;
filter: drop-shadow(8px 4px 20px lightgreen);
animation: flash .3s infinite alternate var(--state);
}
#mplayer:hover {
transform: skew(5deg);
}
#mypic {
width: 100%;
height: 100%;
display: none;
position: absolute;
}
.bird { position: absolute; transform: translate(-100px, -200px); }
.bird:nth-of-type(2) { transform: translate(100px, -240px); }
#canv {
display: block;
position: absolute;
}
@keyframes flash {
to { filter: drop-shadow(16px 8px 40px green); }
}
</style>
<div id="papa">
<img class="bird" src="https://638183.freep.cn/638183/t22/animal/bird3.gif" alt="" />
<img class="bird" src="https://638183.freep.cn/638183/t22/animal/bird3.gif" alt="" />
<div id="mplayer">
<canvas id="canv" width="169" height="155"></canvas>
<img id="mypic" src="https://638183.freep.cn/638183/t23/webp/insect.webp" alt="" />
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2026218482.mp3" autoplay loop></audio>
</div>
</div>
<script>
(function() {
let context = canv.getContext('2d');
let oImg = new Image();
oImg.src = mypic.src;
oImg.onload = () => context.drawImage(oImg,0,0,canv.width,canv.height);
let mState = () => aud.paused ? (canv.style.display = 'block', mypic.style.display = 'none', mplayer.style.setProperty('--state','paused')) : (canv.style.display = 'none', mypic.style.display = 'block', mplayer.style.setProperty('--state','running'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

复制代码

马黑黑 · 发表于 2023-3-7 12:38

本帖最后由马黑黑于 2023-3-7 13:08 编辑

昆虫播放器特效：

mplayer 是父元素，它按图片的尺寸规定了宽高尺寸，其内有两个子元素，一个img，一个canvas（画布），它们通过 mState 函数根据音乐的播放/暂停来决定显示哪一个（暂停时显示画布，播放时显示img图片）。

mplayer设置有阴影，使用滤镜 drop-shadow 实现。相比于 box-shadow 阴影，drop-shadow 对透明背景的图片能营造更完美的基于图形的阴影。阴影还使用了关键帧动画令其变幻。

画布仅能捕捉动图的第一帧，因此音乐暂停时显示出来的昆虫总是动图的第一帧。如果需要显示当前帧，则需要复杂的实现机制，纯JS的话，要拆解帧，需要跨域操作；如果使用第三方框架，实现起来相对容易，但论坛不支持。

mplayer还有一个伪类 :hover，鼠标指针滑过时略微扭曲一定角度。

帖子上方的飞鸟，如果需要，也可以随音乐的播放与暂停实现暂停飞行，但我担心它们会掉下来，所以没做