去公园嚎嚎
<style>#papa {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: snow url('https://638183.freep.cn/638183/t23/2/gy.jpg') no-repeat center/cover;
box-shadow: 0 0 8px #000;
position: relative;
--state: paused; --delay: 0s;
}
#papa::before, #papa::after {
position: absolute;
content: url('https://638183.freep.cn/638183/t22/gif/hudie.gif');
transform: rotate(-90deg);
offset-path: path('M60 60 H960 z');
offset-distance: 100%;
animation: fly 30s var(--delay) infinite linear var(--state);
}
#papa::after { --delay: -15s; }
#papa > img {
position: absolute;
left: 55%;
bottom: 20%;
cursor: pointer;
}
@keyframes fly { to { offset-distance: 0%; } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1854481298" autoplay="autoplay" loop="loop"></audio>
<img id="mplayer" src="https://638183.freep.cn/638183/2-0.gif" alt="" />
</div>
<script>
(function() {
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
mplayer.onmouseover = () => mplayer.src = 'https://638183.freep.cn/638183/2-2.gif';
mplayer.onmouseout = () => mplayer.src = 'https://638183.freep.cn/638183/2-0.gif';
})();
</script> 哈哈，打开是个卡通的嚎的小动物，鼠标上去成了发狂的熊，这个太好玩了{:4_189:} 嚎得还挺过瘾的，赶紧，公园清场，留出嚎的场所{:4_189:} 本帖最后由 马黑黑 于 2023-6-6 19:46 编辑
红影 发表于 2023-6-6 19:39
嚎得还挺过瘾的，赶紧，公园清场，留出嚎的场所
不扰民最好
代码
<style>
#papa {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: snow url('https://638183.freep.cn/638183/t23/2/gy.jpg') no-repeat center/cover;
box-shadow: 0 0 8px #000;
position: relative;
--state: paused; --delay: 0s;
}
#papa::before, #papa::after {
position: absolute;
content: url('https://638183.freep.cn/638183/t22/gif/hudie.gif');
transform: rotate(-90deg);
offset-path: path('M60 60 H960 z');
offset-distance: 100%;
animation: fly 30s var(--delay) infinite linear var(--state);
}
#papa::after { --delay: -15s; }
#papa > img {
position: absolute;
left: 55%;
bottom: 20%;
cursor: pointer;
}
@keyframes fly { to { offset-distance: 0%; } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1854481298" autoplay="autoplay" loop="loop"></audio>
<img id="mplayer" src="https://638183.freep.cn/638183/2-0.gif" alt="" />
</div>
<script>
(function() {
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
mplayer.onmouseover = () => mplayer.src = 'https://638183.freep.cn/638183/2-2.gif';
mplayer.onmouseout = () => mplayer.src = 'https://638183.freep.cn/638183/2-0.gif';
})();
</script>
红影 发表于 2023-6-6 19:36
哈哈，打开是个卡通的嚎的小动物，鼠标上去成了发狂的熊，这个太好玩了
{:4_172:} 这只蝴蝶的设置巧妙，用时间滞后就能让两个分开，而且取一半的时间，正好相对。 红影 发表于 2023-6-6 19:45
这只蝴蝶的设置巧妙，用时间滞后就能让两个分开，而且取一半的时间，正好相对。
看出来了，厉害 没事多嚎嚎，好舒畅。{:4_172:} 来看看，老师分享好。{:4_180:} 好有趣的帖，欣赏嚎下。 醉美水芙蓉 发表于 2023-6-6 20:53
开心的嚎嚎!
{:4_205:} 梦缘 发表于 2023-6-6 20:48
没事多嚎嚎，好舒畅。
{:4_181:} 醉美水芙蓉 发表于 2023-6-6 20:52
吃饱着旋旋！
挺好 醉美水芙蓉 发表于 2023-6-6 20:52
来看看老师的动物园！
{:4_190:} 这个小熊做得真可爱。 这个里面躲了个小熊{:4_170:} 可以控制音乐，黑黑好创意{:4_199:}