月亮走我不走

马黑黑

马黑黑

1. <style>
   
2. .outer {
   
3.         left: -20px;
   
4.         width: 800px;
   
5.         height: 560px;
   
6.         background: #ccc linear-gradient(black,transparent,teal);
   
7.         box-shadow: 3px 3px 4px #333;
   
8.         display: flex;
   
9.         position: relative;
   
10. }
    
11. .outer meter {
    
12.         position: absolute;
    
13.         width: 100px;
    
14.         bottom: 60px;
    
15.         left: -20px;
    
16.         transform: rotate(-90deg);
    
17.         cursor: pointer;
    
18. }
    
19. .moon {
    
20.         margin: auto;
    
21.         width: 100px;
    
22.         height: 100px;
    
23.         border-radius: 50%;
    
24.         background: transparent;
    
25.         box-shadow: 20px 20px 0 0 gold;
    
26.         cursor: pointer;
    
27. }
    
28. .star {
    
29.         position: absolute;
    
30.         width: 2px;
    
31.         height: 2px;
    
32.         background: #eee;
    
33.         display: block;
    
34.         animation: flash 1s linear infinite;
    
35. }
    
36. @keyframes flash {
    
37.         from { opacity: 1; }
    
38.         to { opacity: 0; }
    
39. }
    
40. </style>
    
41. 
    
42. <div class="outer">
    
43.         <div class="moon"></div>
    
44.         <meter id="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
    
45. </div>
    
46. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=212412.mp3" autoplay="autoplay" loop="loop"></audio>
    
47. 
    
48. <script>
    
49. 
    
50. let outer = document.querySelector('.outer'),
    
51.         moon = document.querySelector('.moon'),
    
52.         aud = document.querySelector('#aud'),
    
53.         meter = document.querySelector('#meter');
    
54. let num = (min,max) => Math.floor(Math.random() * (max-min+1)) + min;
    
55. 
    
56. Array.from({length: 200}).forEach((ele) => {
    
57.         ele = document.createElement('span');
    
58.         ele.className = 'star';
    
59.         ele.style.left = num(2,798) + 'px';
    
60.         ele.style.top = num(2,200) + 'px';
    
61.         ele.style.animationDelay = Math.random() * 1.5 + 's';
    
62.         outer.appendChild(ele);
    
63. })
    
64. 
    
65. moon.onclick = meter.onclick = () => aud.paused ? aud.play() : aud.pause();
    
66. aud.addEventListener('timeupdate',()=> {
    
67.         let prog = 100 * aud.currentTime / aud.duration;
    
68.         let deg = prog * 180 / 100 + 90; // 转半圈：从左中开始
    
69.         moon.style.transform = 'rotate(' + deg + 'deg) ' + 'translateY(200px) rotate(-' + deg + 'deg)';
    
70.         meter.value = prog;
    
71. });
    
72. 
    
73. </script>

复制代码

加林森

哇噻，老黑又整出新的播放器。厉害厉害。

加林森

月亮还真在走啊。佩服佩服。

加林森

满眼的小星星还在不停地闪烁，真美丽。

小辣椒

黑黑又一个啊

马黑黑

小辣椒 发表于 2022-6-2 18:26
黑黑又一个啊

这个不用图片

马黑黑

加林森 发表于 2022-6-2 18:09
哇噻，老黑又整出新的播放器。厉害厉害。

这是分离式播放器

马黑黑

加林森 发表于 2022-6-2 18:14
满眼的小星星还在不停地闪烁，真美丽。

这些小星星能异步闪烁

马黑黑

加林森 发表于 2022-6-2 18:11
月亮还真在走啊。佩服佩服。

就是我不走

加林森

马黑黑 发表于 2022-6-2 18:32
就是我不走

黑牛~~~~~~~~~~~~~~

加林森

马黑黑 发表于 2022-6-2 18:31
这些小星星能异步闪烁

真漂亮

加林森

马黑黑 发表于 2022-6-2 18:31
这是分离式播放器

很漂亮的制作！

东篱闲人

漂亮！

马黑黑

醉美水芙蓉 发表于 2022-6-2 19:49
这个播放器真漂亮！

分离式的，估计你没见过此类播放器

马黑黑

加林森 发表于 2022-6-2 19:11
黑牛~~~~~~~~~~~~~~

我外号

马黑黑

东篱闲人 发表于 2022-6-2 19:33
漂亮！

退休金靠它了

马黑黑

加林森 发表于 2022-6-2 19:12
真漂亮

还行

马黑黑

加林森 发表于 2022-6-2 19:12
很漂亮的制作！

一般一般班里倒数第三