东篱的阴天

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #papa {
   
3.         --state: paused;
   
4.         margin: 80px 0 0 calc(50% - 781px);
   
5.         width: 1400px;
   
6.         height: 800px;
   
7.         background: gray url('https://docimg6.docs.qq.com/image/AgAAC6u-TVOC_8GHQrZIY53X14tQwyim.png') no-repeat center/cover;
   
8.         box-shadow: 3px 3px 20px #000;
   
9.         position: relative;
   
10.         pointer-events: none;
    
11.         z-index: 1;
    
12. }
    
13. #papa::before {
    
14.         position: absolute;
    
15.         content: '';
    
16.         pointer-events: auto;
    
17.         left: 154px;
    
18.         top: 253px;
    
19.         width: 206px;
    
20.         height: 135px;
    
21.         background: gray url('https://docimg6.docs.qq.com/image/AgAAC6u-TVOC_8GHQrZIY53X14tQwyim.png') -154px -253px;
    
22.         border-radius: 50%;
    
23.         cursor: pointer;
    
24.         animation: scale .6s infinite alternate var(--state);
    
25. }
    
26. @keyframes scale { to { transform: scale(1.2) skew(8deg); } }
    
27. </style>
    
28. 
    
29. <div id="papa">
    
30.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=265951.mp3" loop autoplay></audio>
    
31. </div>
    
32. 
    
33. <script>
    
34. let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
35. papa.onclick = () => aud.paused ? aud.play() : aud.pause();
    
36. aud.addEventListener('play', () => mState());
    
37. aud.addEventListener('pause', () => mState());
    
38. </script>

复制代码

马黑黑

不多不少，38行代码！偷东篱的帖子祝女王们女王节快乐！

梦缘

感谢老师的代码，不错啊！

花飞飞

马黑黑 发表于 2023-3-6 20:20
不多不少，38行代码！偷东篱的帖子祝女王们女王节快乐！

代码巧妙

红影

好玩，把那把伞抓出来，单独做了特效呢

红影

也无风雨也无晴==阴天
这是什么神思维

马黑黑

醉美水芙蓉 发表于 2023-3-6 20:37
为啥只有伞会缩小和放大？

是斗笠

马黑黑

梦缘 发表于 2023-3-6 20:22
感谢老师的代码，不错啊！

还行

马黑黑

花飞飞 发表于 2023-3-6 20:27
代码巧妙

还不差

马黑黑

红影 发表于 2023-3-6 20:29
好玩，把那把伞抓出来，单独做了特效呢

是斗笠

马黑黑

红影 发表于 2023-3-6 20:31
也无风雨也无晴==阴天
这是什么神思维

反正东篱承认了

马黑黑

醉美水芙蓉 发表于 2023-3-6 20:32
伞变成播放器了！

好玩不

焱鑫磊

欣赏老师佳作！

马黑黑

焱鑫磊 发表于 2023-3-6 21:47
欣赏老师佳作！

东篱的

雨中悄然

老师的贴子要支持

马黑黑

雨中悄然 发表于 2023-3-6 22:30
老师的贴子要支持

感谢支持

庶民

代码玩的舒畅。