去公园嚎嚎

马黑黑

红影

哈哈，打开是个卡通的嚎的小动物，鼠标上去成了发狂的熊，这个太好玩了

红影

嚎得还挺过瘾的，赶紧，公园清场，留出嚎的场所

马黑黑

红影 发表于 2023-6-6 19:39
嚎得还挺过瘾的，赶紧，公园清场，留出嚎的场所

不扰民最好

代码

1. <style>
   
2. #papa {
   
3.         margin: 0 0 0 calc(50% - 593px);
   
4.         width: 1024px;
   
5.         height: 640px;
   
6.         background: snow url('https://638183.freep.cn/638183/t23/2/gy.jpg') no-repeat center/cover;
   
7.         box-shadow: 0 0 8px #000;
   
8.         position: relative;
   
9.         --state: paused; --delay: 0s;
   
10. }
    
11. #papa::before, #papa::after {
    
12.         position: absolute;
    
13.         content: url('https://638183.freep.cn/638183/t22/gif/hudie.gif');
    
14.         transform: rotate(-90deg);
    
15.         offset-path: path('M60 60 H960 z');
    
16.         offset-distance: 100%;
    
17.         animation: fly 30s var(--delay) infinite linear var(--state);
    
18. }
    
19. #papa::after { --delay: -15s; }
    
20. #papa > img {
    
21.         position: absolute;
    
22.         left: 55%;
    
23.         bottom: 20%;
    
24.         cursor: pointer;
    
25. }
    
26. @keyframes fly { to { offset-distance: 0%; } }
    
27. </style>
    
28. 
    
29. <div id="papa">
    
30.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1854481298" autoplay="autoplay" loop="loop"></audio>
    
31.         <img id="mplayer" src="https://638183.freep.cn/638183/2-0.gif" alt="" />
    
32. </div>
    
33. 
    
34. <script>
    
35. (function() {
    
36.         let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
37.         aud.addEventListener('play', mState, false);
    
38.         aud.addEventListener('pause', mState, false);
    
39.         papa.onclick = () => aud.paused ? aud.play() : aud.pause();
    
40.         mplayer.onmouseover = () => mplayer.src = 'https://638183.freep.cn/638183/2-2.gif';
    
41.         mplayer.onmouseout = () => mplayer.src = 'https://638183.freep.cn/638183/2-0.gif';
    
42. })();
    
43. </script>

复制代码

马黑黑

红影 发表于 2023-6-6 19:36
哈哈，打开是个卡通的嚎的小动物，鼠标上去成了发狂的熊，这个太好玩了

红影

这只蝴蝶的设置巧妙，用时间滞后就能让两个分开，而且取一半的时间，正好相对。

马黑黑

红影 发表于 2023-6-6 19:45
这只蝴蝶的设置巧妙，用时间滞后就能让两个分开，而且取一半的时间，正好相对。

看出来了，厉害

梦缘

没事多嚎嚎，好舒畅。

梦缘

来看看，老师分享好。

梦缘

好有趣的帖，欣赏嚎下。

马黑黑

醉美水芙蓉 发表于 2023-6-6 20:53
开心的嚎嚎!

马黑黑

梦缘 发表于 2023-6-6 20:48
没事多嚎嚎，好舒畅。

马黑黑

醉美水芙蓉 发表于 2023-6-6 20:52
吃饱着旋旋！

挺好

马黑黑

醉美水芙蓉 发表于 2023-6-6 20:52
来看看老师的动物园！

梦油

这个小熊做得真可爱。

小辣椒

这个里面躲了个小熊

小辣椒

可以控制音乐，黑黑好创意