惊蛰
<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> 帖子代码
<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 13:08 编辑
昆虫播放器特效：
mplayer 是父元素，它按图片的尺寸规定了宽高尺寸，其内有两个子元素，一个img，一个canvas（画布），它们通过 mState 函数根据音乐的播放/暂停来决定显示哪一个（暂停时显示画布，播放时显示img图片）。
mplayer设置有阴影，使用滤镜 drop-shadow 实现。相比于 box-shadow 阴影，drop-shadow 对透明背景的图片能营造更完美的基于图形的阴影。阴影还使用了关键帧动画令其变幻。
画布仅能捕捉动图的第一帧，因此音乐暂停时显示出来的昆虫总是动图的第一帧。如果需要显示当前帧，则需要复杂的实现机制，纯JS的话，要拆解帧，需要跨域操作；如果使用第三方框架，实现起来相对容易，但论坛不支持。
mplayer还有一个伪类 :hover，鼠标指针滑过时略微扭曲一定角度。
帖子上方的飞鸟，如果需要，也可以随音乐的播放与暂停实现暂停飞行，但我担心它们会掉下来，所以没做{:4_170:}
沙发还是我的，刚才看见黑黑二楼写预留没有回帖 播放器自带闪光{:4_199:} 帖子上方的飞鸟，如果需要，也可以随音乐的播放与暂停实现暂停飞行，但我担心它们会掉下来，所以没做
这个和上次百发百中的效果一样？ 上次那个百发百中的打枪效果太太喜欢了{:4_170:} 大地回春，惊蛰虫醒。 欣赏好帖 小辣椒 发表于 2023-3-7 13:35
沙发还是我的，刚才看见黑黑二楼写预留没有回帖
预留一般有了就有了 小辣椒 发表于 2023-3-7 13:38
帖子上方的飞鸟，如果需要，也可以随音乐的播放与暂停实现暂停飞行，但我担心它们会掉下来，所以没做
这 ...
不一样，不是一个机制 小辣椒 发表于 2023-3-7 13:35
播放器自带闪光
之前好像也有过的，是鼠标划过去时闪的光 庶民 发表于 2023-3-7 14:13
大地回春，惊蛰虫醒。
万物复苏 小辣椒 发表于 2023-3-7 13:39
上次那个百发百中的打枪效果太太喜欢了
那个是元素的不断追加和删除，跟这个完全不同 起个网名好难 发表于 2023-3-7 16:14
欣赏好帖
几个CSS原理的东东，好不到哪里去 马黑黑 发表于 2023-3-7 18:53
几个CSS原理的东东，好不到哪里去
用的好呀 这个很有趣，惊蛰所有的蛰伏的动物都活跃了{:4_173:} “画布仅能捕捉动图的第一帧，因此音乐暂停时显示出来的昆虫总是动图的第一帧。”
这个好，以前也做过播放器点击时动图停止，我记得是替换成静态图，这个直接就能停止了，不用做两张图图了 马黑黑 发表于 2023-3-7 12:38
昆虫播放器特效：
mplayer 是父元素，它按图片的尺寸规定了宽高尺寸，其内有两个子元素，一个img，一个c ...
“如果需要，也可以随音乐的播放与暂停实现暂停飞行”
也是同样设置么？用canv？可是2个canv在JS里怎么弄呢？ 奇怪，我怎么看不到阴影。