画个月亮
首先我们先让全屏背景变成黑色，然后实现一个大月亮，并加点"渐变"，“光晕"等效果
- html
<body>
<div class="wrap">
<div class="moon"></div>
</div>
</body>
- css
.wrap { background: #000000; 100vw; height: 100vh; position: relative; } .moon { 100px; height: 100px; border-radius: 50%; background-image: linear-gradient(40deg, #f9fabe, #fffd3b); position: absolute; top: 10%; right: 20%; box-shadow: 0 0 30px 0px #fffd3b, 0 0 80px 0 #ffffff; }
此时大月亮就出来了
然后给月亮加点”渐明渐暗“的动画效果,使用filter属性中的brightness就可以实现
@keyframes moonflashing { 0% { filter: brightness(0.8); } 50% { filter: brightness(1.3); } 100% { filter: brightness(0.8); } }
星星点缀
天空中只有月亮没有星星怎么能行,我们在天空中加几个星星
- html
<div class="star star1"></div>
<div class="star star2"></div>
<div class="star star3"></div>
<div class="star star4"></div>
<div class="star star5"></div>
<div class="star star6"></div>
<div class="star star7"></div>
- css
.star { 2px; height: 2px; border-radius: 50%; background: #ffffff; position: absolute; animation: starflashing 2s infinite; } .star1 { top: 50%; right: 20%; } .star2 { top: 70%; right: 30%; } .star3 { top: 40%; left: 20%; } .star4 { top: 60%; right: 10%; } .star5 { top: 55%; right: 44%; } .star6 { top: 10%; left: 30%; } .star7 { top: 15%; left: 20%; }
然后再为星星加上“一闪一闪”的动画✨✨✨
@keyframes starflashing { 0% { filter: brightness(0.3); } 50% { filter: brightness(1); } 100% { filter: brightness(0.3); } }
此时天空中便有了一闪一闪亮晶晶的星星啦
流星划过
接下来便是”流星“的实现了，我们先画一个静态的流星，流星包括它的头+尾巴。我们可以先画个流星头
- html
<div class="meteor"></div>
- css
.meteor { position: absolute; 4px; height: 4px; top: 30%; left: 30%; background: #ffffff; border-radius: 50%; box-shadow: 0 0 5px 5px #636262; }
流星头实现很简单，就是一个圆加box-shadow阴影效果
然后再画它的尾巴。我们可以用它的伪元素实现
.meteor:after { content: ""; display: block; border: 0px solid #fff; border- 2px 100px; border-color: transparent transparent transparent rgba(255, 255, 255, 0.3); }
注意这里的色值要用rgba形式，因为需要它的透明效果
再将其旋转45度,使用translate3d进行平移调整对齐
transform: rotate(-45deg) translate3d(1px, 1px, 0);
transform-origin: 0% 0%;
接下来我们要做的就是让流星坠落下去，我们可以先定义一个动画
.meteor { position: absolute; 4px; height: 4px; top: 30%; left: 30%; background: #ffffff; border-radius: 50%; box-shadow: 0 0 5px 5px #636262; animation: meteorflashing 3s infinite linear 1s; } @keyframes meteorflashing { 0% { opacity: 0; transform: scale(0) translate3d(0, 0, 0); } 50% { opacity: 1; transform: scale(1) translate3d(-200px, 200px, 0); } 100% { opacity: 0; transform: scale(1) translate3d(-500px, 500px, 0); } }
这时候便实现了流星坠落的效果（闭上眼睛想象一下它是动的）
最后我们多加一点流星并给它们不同的延迟时间与动画时间
- html
<div class="meteor meteor1"></div>
<div class="meteor meteor2"></div>
<div class="meteor meteor3"></div>
<div class="meteor meteor4"></div>
<div class="meteor meteor5"></div>
- css
.meteor { position: absolute; 4px; height: 4px; opacity: 0; background: #ffffff; border-radius: 50%; box-shadow: 0 0 5px 5px #636262; } .meteor:after { content: ""; display: block; border: 0px solid #fff; border- 2px 100px 2px 100px; border-color: transparent transparent transparent rgba(255, 255, 255, 0.3); transform: rotate(-45deg) translate3d(1px, 1px, 0); transform-origin: 0% 0%; } .meteor1 { top: 2vh; left: 30vw; animation: meteorflashing 2s infinite linear 1s; } .meteor2 { top: 22vh; left: 80vw; background: rgb(234, 0, 255); animation: meteorflashing 2s infinite linear 1s; } .meteor3 { top: 30vh; left: 40vw; animation: meteorflashing 3s infinite linear 2s; } .meteor4 { top: 10vh; left: 50vw; animation: meteorflashing 3s infinite linear 1s; } .meteor5 { top: 50vh; right: 2vw; animation: meteorflashing 3s infinite linear 3s; } @keyframes meteorflashing { 0% { opacity: 0; transform: scale(0) translate3d(0, 0, 0); } 50% { opacity: 1; transform: scale(1) translate3d(-200px, 200px, 0); } 100% { opacity: 0; transform: scale(1) translate3d(-500px, 500px, 0); } }
好啦,此时便实现了我们所需要的效果啦