明月逐人归

马黑黑

马黑黑

代码

1. <!-- CSS代码 -->
   
2. <style>
   
3. /* 父元素 */
   
4. #mydiv {
   
5.         margin: 20px auto 0;
   
6.         width: 1000px;
   
7.         height: 667px;
   
8.         z-index: 1;
   
9.         background: #333 url('https://638183.freep.cn/638183/t23/2/night.jpeg');
   
10.         box-shadow: 0 0 8px 0 #000;
    
11.         overflow: hidden;
    
12.         position: relative;
    
13.         --state: paused;
    
14. }
    
15. /* 父元素伪元素 ：通用属性 */
    
16. #mydiv::before, #mydiv::after {
    
17.         position: absolute;
    
18.         content: '';
    
19.         cursor: pointer;
    
20.         transition: 1s;
    
21. }
    
22. /* 狗 */
    
23. #mydiv::before {
    
24.         content: '\1F415';
    
25.         font: normal 60px sans-serif;
    
26.         transform: translate(510px,540px) rotate(45deg);
    
27. }
    
28. /* 月亮 */
    
29. #mydiv::after {
    
30.         width: 80px;
    
31.         height: 80px;
    
32.         background: linear-gradient(45deg,antiquewhite 0%, snow 90%, snow 100%);
    
33.         border-radius: 50%;
    
34.         left: calc(50% - 40px);
    
35.         top: 20px;
    
36.         box-shadow: 0 0 30px 0px lightblue, 0 0 100px 0 white;
    
37. }
    
38. /* 月亮变大 */
    
39. #mydiv:hover:after { transform: scale(1.2); }
    
40. /* 粒子 */
    
41. li-zi {
    
42.         position: absolute;
    
43.         background: lightblue;
    
44.         opacity: .9;
    
45.         transform: rotate(-45deg);
    
46.         animation: flash .5s var(--delay) infinite alternate var(--state);
    
47.         --delay: 0s;
    
48. }
    
49. /* 关键帧动画 ：旋转+闪烁 */
    
50. @keyframes flash {
    
51.         to { transform: rotate(-30deg); opacity: .2; }
    
52. }
    
53. </style>
    
54. 
    
55. <!-- HTML代码 -->
    
56. <div id="mydiv"></div>
    
57. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=32743521" autoplay="autoplay" loop="loop"></audio>
    
58. 
    
59. <!-- JS代码 -->
    
60. <script>
    
61.         //类
    
62.         let total = 100;
    
63.         class Lizi {
    
64.                 constructor(pa,size = 20) {
    
65.                         this.pa = pa;
    
66.                         this.size = size;
    
67.                         this.left = 10;
    
68.                         this.top = 10;
    
69.                         this.ele = document.createElement('li-zi');
    
70.                 }
    
71.                 creating() {
    
72.                         this.ele.style.cssText = `
    
73.                                 width: ${this.size}px;
    
74.                                 height: ${this.size}px;
    
75.                                 left: ${this.left}px;
    
76.                                 top: ${this.top}px;
    
77.                         `;
    
78.                         this.pa.appendChild(this.ele);
    
79.                 }
    
80.         }
    
81.         //实例化类
    
82.         Array.from({length: total}).forEach((element,key) => {
    
83.                 let r = 10 + Math.random() * 160;
    
84.                 element = new Lizi(mydiv);
    
85.                 element.size = 2 + Math.ceil(Math.random() * 2);
    
86.                 element.left = key < total / 2 ? Math.random() * 400 : 600 + Math.random() * 390;
    
87.                 element.top = key < total / 2 ? Math.random() * 200 : Math.random() * 160;
    
88.                 element.creating();
    
89.                 element.ele.style.setProperty('--delay', Math.random() + 's');
    
90.         });
    
91.         //音频控制
    
92.         let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
93.         aud.addEventListener('play', mState, false);
    
94.         aud.addEventListener('pause', mState, false);
    
95.         mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
    
96. 
    
97. </script>

复制代码

马黑黑

类里，有几个简单的属性，没有方法。

类的实例化，将星星分两半，一般置于月亮的左边、另一半置于月亮的右边。

简简单单，无需太多的华丽，那村，那夜，那月，那小道，那狗，那思念……便营造了出来。

路人甲

欣赏好贴！于田间明月中，抒款款思念情

红影

这小狗狗天生就有颜色呢，这么多漂亮的小星星，这个类能做的真多

红影

看到这个不觉想到天狗食月的成语，哈哈。月亮能变大也很漂亮的设计

小文

唯美

南无月

安静

马黑黑

醉美水芙蓉 发表于 2023-7-10 18:27
欣赏老师独特的构思！

谢谢

小辣椒

上来先看看黑黑最近几天的教程分享。。。。。

小辣椒

看见猫猫生日了，这个我可以套用玩一个

马黑黑

小辣椒 发表于 2023-7-12 21:31
看见猫猫生日了，这个我可以套用玩一个

类似这个的，你以前跟队长都玩过