嫦娥奔月

马黑黑

00:00

00:00

马黑黑

代码

1. <style>
   
2. #papa {
   
3.         margin: 0 0 0 calc(50% - 721px);
   
4.         width: 1280px;
   
5.         height: 800px;
   
6.         background: lightblue url('https://638183.freep.cn/638183/t22/webp/ieby.webp') no-repeat;
   
7.         box-shadow: 3px 3px 20px #000;
   
8.         display: grid;
   
9.         place-items: center;
   
10.         user-select: none;
    
11.         position: relative;
    
12.         z-index: 1;
    
13. }
    
14. #mplayer {
    
15.         position: absolute;
    
16.         display: grid;
    
17.         grid-template-areas:
    
18.                 'cur btnplay dur'
    
19.                 'prog prog prog';
    
20.         gap: 0 4px;
    
21.         place-items: end center;
    
22.         font-size: 14px;
    
23.         bottom: 20px;
    
24. }
    
25. #cur { grid-area: cur; color: purple; }
    
26. #dur { grid-area: dur; color: purple; }
    
27. #btnplay {
    
28.         grid-area: btnplay;
    
29.         display: grid;
    
30.         grid-auto-flow: column;
    
31.         place-items: end center;
    
32.         gap: 0 4px;
    
33.         height: 60px;
    
34.         cursor: pointer;
    
35. }
    
36. #btnplay > span {
    
37.         background: red;
    
38.         width: 2px;
    
39.         transition: .3s;
    
40. }
    
41. #prog {
    
42.         grid-area: prog;
    
43.         width: 300px;
    
44.         height: 16px;
    
45.         opacity: .65;
    
46.         cursor: pointer;
    
47.         position: relative;
    
48. }
    
49. 
    
50. </style>
    
51. 
    
52. <div id="papa">
    
53.         <div id="mplayer">
    
54.                 <div id="cur">00:00</div>
    
55.                 <div id="btnplay"></div>
    
56.                 <div id="dur">00:00</div>
    
57.                 <progress id="prog" max="100"></progress>
    
58.         </div>
    
59.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1453325911.mp3" loop autoplay></audio>
    
60.         <img src="https://638183.freep.cn/638183/t22/gif/hudp.gif" alt="" style="position: absolute; width: 60px; top: 135px; left: 386px;" />
    
61.         <img src="https://638183.freep.cn/638183/t22/gif/hudp.gif" alt="" style="position: absolute; width: 100px; top: 250px; left: 620px; transform: rotate(-60deg);" />
    
62.         <img src="https://638183.freep.cn/638183/t22/gif/hudp.gif" alt="" style="position: absolute; width: 150px; top: 160px; right: 30px; transform: rotate(-35deg);" />
    
63. </div>
    
64. 
    
65. <script>
    
66. (function() {
    
67.         (function() {
    
68.                 for(j=0; j<20; j++) {
    
69.                         let pinpu = document.createElement('span');
    
70.                         pinpu.className = 'pinpu';
    
71.                         pinpu.style.cssText += `height: ${Math.floor(Math.random()*50) + 10}px; background: #${Math.random().toString(16).substr(-6)};`;
    
72.                         btnplay.appendChild(pinpu);
    
73.                 }
    
74.         })();
    
75.         btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
    
76.         prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
    
77.         aud.addEventListener('timeupdate', () => {
    
78.                 prog.value = aud.currentTime / aud.duration * 100;
    
79.                 cur.innerText = toMin(aud.currentTime);
    
80.                 dur.innerText = toMin(aud.duration);
    
81.                 setPinpu();
    
82.         });
    
83. 
    
84.         let toMin = (val) => {
    
85.                 if (!val) return '00:00';
    
86.                 val = Math.floor(val);
    
87.                 let min = parseInt(val / 60),
    
88.                         sec = parseFloat(val % 60);
    
89.                 if (min < 10) min = '0' + min;
    
90.                 if (sec < 10) sec = '0' + sec;
    
91.                 return min + ':' + sec;
    
92.         };
    
93. 
    
94.         let setPinpu = ()  => {
    
95.                 let eles = document.querySelectorAll('.pinpu');
    
96.                 eles.forEach((item) => item.style.height = `${Math.floor(Math.random()*50) + 10}px`);
    
97.         };
    
98. })();
    
99. </script>
    

复制代码

梦油

黑黑朋友为这件作品的配乐真是恰到好处、美不胜收。

红影

还是头一次看黑黑做这种风格的帖子，仙袂飘飘，真是太美了

红影

三只小蝴蝶用得漂亮，和底图色彩十分协调。漂亮

相约爱晚亭

欣赏精美音画佳作！

马黑黑

醉美水芙蓉 发表于 2022-11-17 11:42
老师的作品真是太美了！

过奖，一般般

马黑黑

梦油 发表于 2022-11-17 09:10
黑黑朋友为这件作品的配乐真是恰到好处、美不胜收。

还行的

马黑黑

红影 发表于 2022-11-17 09:45
还是头一次看黑黑做这种风格的帖子，仙袂飘飘，真是太美了

这个简单的

马黑黑

红影 发表于 2022-11-17 09:53
三只小蝴蝶用得漂亮，和底图色彩十分协调。漂亮

放大镜总是有用处的

马黑黑

相约爱晚亭 发表于 2022-11-17 11:24
欣赏精美音画佳作！

感谢支持

小辣椒

这个漂亮，加的蝴蝶给画面增加了灵动感，音画就是加特效出来会特别美，这个老头 千羽应该会喜欢的了
@东篱闲人 @千羽

小辣椒

谢谢黑黑的教程分享。。。。晚上回家早就做一个

红影

马黑黑 发表于 2022-11-17 11:55
这个简单的

虽然样式简单，但是很漂亮

红影

马黑黑 发表于 2022-11-17 11:55
放大镜总是有用处的

蝴蝶是被放大镜给网来的

梦油

马黑黑 发表于 2022-11-17 11:54
还行的

很好，很好。

马黑黑

梦油 发表于 2022-11-17 14:31
很好，很好。

马黑黑

红影 发表于 2022-11-17 13:48
蝴蝶是被放大镜给网来的

差不多差不多

马黑黑

红影 发表于 2022-11-17 13:48
虽然样式简单，但是很漂亮

没人说简单的就不能漂亮