死寂

马黑黑

马黑黑

代码很少

1. <style>
   
2. #papa {
   
3.         margin: -80px 0 0 calc(50% - 593px);
   
4.         width: 1024px;
   
5.         height: 640px;
   
6.         background: darkblue url('https://638183.freep.cn/638183/t23/1/siji.jpg') no-repeat center/cover;
   
7.         box-shadow: 3px 3px 20px #000;
   
8.         position: relative;
   
9.         z-index: 1;
   
10. }
    
11. #mplayer {
    
12.         --state: paused;
    
13.         --angle: 360deg;
    
14.         position: absolute;
    
15.         left: 62%;
    
16.         top: 16%;
    
17.         width: fit-content;
    
18.         height: fit-content;
    
19.         padding: 4px;
    
20.         border: 4px dotted pink;
    
21.         border-radius: 50%;
    
22.         cursor: pointer;
    
23.         animation: rot infinite 10s linear var(--state);
    
24. }
    
25. #mplayer::before, #mplayer::after {
    
26.         position: absolute;
    
27.         content: '';
    
28.         top: -10px; left: -10px; bottom: -10px; right: -10px;
    
29.         border: 4px dotted purple;
    
30.         border-radius: 50%;
    
31.         animation: rot infinite 5s linear;
    
32.         animation-play-state: var(--state);
    
33.         --angle: -360deg;
    
34. }
    
35. #mplayer::after {
    
36.         top: -16px; left: -16px; bottom:  -16px; right: -16px;
    
37.         border-color: darkred;
    
38.         animation-duration: 12s;
    
39.         --angle: 360deg;
    
40. }
    
41. #mplayer > img { width: 160px; height: 160px; border-radius: 50%; }
    
42. @keyframes rot {
    
43.         from { transform: rotate(0); }
    
44.         to { transform: rotate(var(--angle)); }
    
45. }
    
46. </style>
    
47. 
    
48. <div id="papa">
    
49.         <div id="mplayer"><img src="https://638183.freep.cn/638183/t23/webp/siji.webp" alt="" /></div>
    
50.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1393676639.mp3" loop autoplay></audio>
    
51. </div>
    
52. 
    
53. <script>
    
54. let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
55. aud.addEventListener('play', () => mState());
    
56. aud.addEventListener('pause', () => mState());
    
57. mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
    
58. </script>

复制代码

绿叶清舟

音乐开场的点吓人啊

红影

旁边的蓝色的大家伙是什么？是要对美女不利么。黑黑赶快英雄救美

红影

这个JS里的代码真的少了很多，三个圈圈也成了不同的颜色，漂亮

马黑黑

红影 发表于 2023-2-16 22:15
这个JS里的代码真的少了很多，三个圈圈也成了不同的颜色，漂亮

就是音乐有点恐怖哦

马黑黑

绿叶清舟 发表于 2023-2-16 22:05
音乐开场的点吓人啊

是恐怖音乐系列

马黑黑

红影 发表于 2023-2-16 22:12
旁边的蓝色的大家伙是什么？是要对美女不利么。黑黑赶快英雄救美

没有气球，上不去

雨中悄然

太空&#10133;美人&#10133;恐怖音乐
老师这次走的是非主流风格

雨中悄然

热闹的很，哪里死机了

庶民

给我耳目一新的感觉，学习了！

马黑黑

醉美水芙蓉 发表于 2023-2-17 07:09
只看到小图播放器一位美女！

马黑黑

雨中悄然 发表于 2023-2-16 23:58
太空&#10133;美人&#10133;恐怖音乐
老师这次走的是非主流风格

马黑黑

雨中悄然 发表于 2023-2-17 00:03
热闹的很，哪里死机了

马黑黑

庶民 发表于 2023-2-17 05:15
给我耳目一新的感觉，学习了！

马黑黑

醉美水芙蓉 发表于 2023-2-17 07:08
没有看懂图片里是什么东西？

太空里的飞行器

海笑

这个音乐是有点儿恐怖！