🌛月亮视觉交错动画，HTML/Vue代码在线实时编辑、预览

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

            
            $background: #1c2f36;
$lighter-background: #304d5b;
$moon: #ffd7a3;
$clouds: #7eacc4;

html {
  background: $background;
}
body {
  margin: 0;
  width: 100vw;
  min-height: 100vh;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
body * {
  position: absolute;
}
.main {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); 
  top: 50%;
  left: 50%;
  margin: 0;
  background-color: $lighter-background;
  width: 400px;
  height: 400px;
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  position: absolute;
}
.moon-group {
  width: 200px;
  height: 200px;
  top:100px;
  left:100px;
  z-index: 3;
}
.moon {
  position: absolute;
  border-radius: 50%;
  width: 170px;
  height: 170px;
  right: -30px;
  top: -30px;
  box-shadow: -45px 45px 0 40px $moon;
  z-index: 2;
}
.moon-shadow {
  position: absolute;
  width: 200px;
  height: 215px;
  transform: rotate(225deg);
  background-color: rgba($background, 0.4);
  top: 100px;
  left: 100px;
  clip-path: polygon(0% 0%, 100% 0, 65% 50%, 85% 100%, 0% 100%);
  z-index: 1;
}
.cloud-group-1 {
  width: 170px;
  height: 35px;
  bottom: 100px;
  left: 50px;
  z-index: 4;
}
.cloud-group-2 {
  width: 170px;
  height: 35px;
  top: 140px;
  left: 120px;
  z-index: 2;
}
.cloud {
  background-color: $clouds;
  width: 170px;
  height: 35px;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  z-index: 2;
  &:after {
    content: '';
    position: absolute;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    background-color: $clouds;
    top: -15px;
    right: 20px;
    box-shadow: -40px -10px 0 8px $clouds, -80px -5px 0 1px $clouds;
  }
}
.cloud-group-1 .cloud-shadow {
  top: 35px;
  right: -125px;
  z-index: 3;
}
.cloud-group-2 .cloud-shadow {
  top: 35px;
  right: -125px;
  z-index: -1;
}
.cloud-shadow {
  position: absolute;
  height: 250px;
  width: 170px;
  transform: skew(45deg);
  background-color: rgba($background, 0.3);
}
.stars {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 100%;
  z-index: 1;
  height: 400px;
  width: 400px;
  & .star {
    border-radius: 50%;
    background-color: lighten($moon, 10%);
    opacity: 0.75;
  }
  @for $i from 1 through (40) {
    $top: random(400)+px;
    $left: random(400)+px;
    $size: random(10)+px;
    .star:nth-of-type(#{$i}) {
      top: $top;
      left: $left;
      width: $size;
      height: $size;
    }
  }
}