月光鸣奏曲

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #papa {
   
3.         margin: -80px 0  0 calc(50% - 593px);
   
4.         width: 1024px;
   
5.         height: 640px;
   
6.         background: url('https://638183.freep.cn/638183/t23/webp1/night.webp') center/cover no-repeat;
   
7.         overflow: hidden;
   
8.         position: relative;
   
9.         --state: paused;
   
10. }
    
11. #mplayer {
    
12.         position: absolute;
    
13.         width: 40px;
    
14.         height: 40px;
    
15.         border-radius: 50%;
    
16.         box-shadow: 10px 8px snow;
    
17.         cursor: pointer;
    
18.         animation: rot 1s infinite linear alternate var(--state);
    
19. }
    
20. #mplayer::before {
    
21.         position: absolute;
    
22.         content: '';
    
23.         top: 10px;
    
24.         left: 10px;
    
25.         width: 100%;
    
26.         height: 100%;
    
27. }
    
28. #wrap {
    
29.         position: absolute;
    
30.         width: 100%;
    
31.         height: 50%;
    
32.         transform: rotate(-30deg);
    
33. }
    
34. .line {
    
35.         --du: 10s; --delay: 0s;
    
36.         position: absolute;
    
37.         width: 1px;
    
38.         height: 100px;
    
39.         top: -200px;
    
40.         opacity: .9;
    
41.         background: linear-gradient(to top, snow, transparent);
    
42.         animation: flow var(--du) var(--delay) infinite linear;
    
43. }
    
44. @keyframes flow { to { top: 100%; opacity: 0; } }
    
45. @keyframes rot { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
    
46. </style>
    
47. 
    
48. <div id="papa">
    
49.         <div id="wrap"></div>
    
50.         <div id="mplayer"></div>
    
51.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=421110137" autoplay loop></audio>
    
52. </div>
    
53. 
    
54. <script>
    
55. let total = 40, ww = wrap.offsetWidth;
    
56. Array.from({length:total}).forEach((item,key) => {
    
57.         let sp = document.createElement('span');
    
58.         sp.className = 'line';
    
59.         sp.style.cssText += `
    
60.                 --delay: ${Math.random() * 4 - 4}s;
    
61.                 --du: ${Math.random() * 8 + 4}s;
    
62.                 left: ${Math.random() * ww}px;
    
63.                 height: ${Math.random() * 50 + 50}px;
    
64.         `;
    
65.         wrap.appendChild(sp);
    
66. });
    
67. let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
68. aud.addEventListener('play', mState, false);
    
69. aud.addEventListener('pause', mState, false);
    
70. mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    
71. </script>

复制代码

马黑黑

css-doodle版本：Moonlight Sonata (freeee.ml)


两个版本实现机制不尽相同：本帖，使用 40 个 span 模拟流星，css-doodle版则用三个背景层模拟流星。

红影

马黑黑 发表于 2023-4-17 11:57
css-doodle版本：Moonlight Sonata (freeee.ml)

这两个帖子，流星雨下来的方向不一样

红影

用代码模拟的流星雨和月亮，这个制作真棒

樵歌

这个太漂亮了。以后准备抄了

樵歌

不知道写字的话加在第几行中

大猫咪

PP真漂亮！黑黑真棒！徐缓的旋律中流露出一种淡淡的伤感。。。

现在听真舒服

焱鑫磊

欣赏黑黑老师佳作！

梦油

马黑黑 发表于 2023-4-17 11:55
帖子代码

这流星雨制作得很壮观啊！

马黑黑

梦油 发表于 2023-4-17 17:02
这流星雨制作得很壮观啊！

感谢支持

马黑黑

焱鑫磊 发表于 2023-4-17 15:33
欣赏黑黑老师佳作！

晚上好

马黑黑

醉美水芙蓉 发表于 2023-4-17 18:01
流星雨真漂亮！欣赏黑黑老师好作品！

好久不见。一切安好？

梦油

马黑黑 发表于 2023-4-17 17:58
感谢支持

怎一个赞字了得。

马黑黑

梦油 发表于 2023-4-17 18:04
怎一个赞字了得。

马黑黑

醉美水芙蓉 发表于 2023-4-17 18:04
最近腰间盘突出，只能欣赏老师的作品了，不敢玩了！

久坐久站都会得这个病，多运动运动，走走路是挺好的

雨中悄然

左流星，右流星。黑黑天上飞星星