前言

最近真是越来越对CSS感兴趣了，于是再来整一手，夜晚的星星，再配合上皎洁的月光，这唯美的星空，它来了！

今天带领大家，用CSS实现一下，这美丽的星空。

开始实现星空

image.png
我是找了张图片，这毕竟功力有限，目前还不能人造星~，下面说一下如何将它放置在夜空中，并实现眨眼睛的效果：

运用了一个span标签，将此图片作为其背景图，来生成星星：

1
2
3
4
5
6
7
8
9
10
11
12
13
var screenW = document.documentElement.clientWidth;
var screenH = document.documentElement.clientHeight;
for(var i=0; i<150; i++){
    var span = document.createElement('span');
    document.body.appendChild(span);
    var x = parseInt(Math.random() * screenW);
    var y = parseInt(Math.random() * screenH);
    span.style.left = x + 'px';
    span.style.top = y + 'px';
    span.style.zIndex = "0";
    var scale = Math.random() * 1.5;
    span.style.transform = 'scale('+ scale + ', ' + scale + ')';
}

先获取屏幕宽高，完后用上随机数使得星星的位置随机，大小随机，频率随机。

image.png

会眨眼睛的才是好星星

星星还要是一眨一眨的，才好看，所以我们给它加上一个动画，更改其的透明度就好：

1
2
3
4
@keyframes flash {
    0%{opacity: 0;}
    100%{opacity: 1;}
}

但是我们很快发现一个问题，就是它太过于整齐划一：
整齐划一.gif

我们在生成星星的时候，给它每一个的延迟频率随机一下，这样就能保证它们有一种参差错落的感觉。

1
2
var rate = Math.random() * 1.5;
span.style.animationDelay = rate + 's';

现在来看看我们美丽的星空吧~：

星空.gif

最后再给星星加一个hover效果，将其放大一点，完后旋转个180

1
2
3
4
span:hover{
    transform: scale(3, 3) rotate(180deg) !important;
    transition: all 1s;
}

hover.gif

开始实现月亮

一个美丽的夜晚，天空中除了星星，应当还有月亮：月亮主要是两个动画，一个是从左下往右上移动，达到一个月亮升起的效果，另一个是随着升起，月亮周围的光辉变得越来越亮眼。

做法：将月亮放到一个容器中，用容器来做移动的特效，月亮本身只关注光辉就好。

1
2
3
<div id="wrapper">
        <div id="circle"></div>
</div>
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
#wrapper {
    position:absolute;
    top:50px;
    left:80%;
    width:200px;
    height:200px;
    margin-left:-100px;
    animation: moonline 5s linear;
}
@-webkit-keyframes moonline {
    0% {top:250px;left:0%;opacity:0;}
    30% {top:150px;left:40%;opacity:0.5;}
    80% {top:50px;left:80%;opacity:1;}
}
#circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background-color: #EFEFEF;
    box-shadow:0 0 40px #FFFFFF;
    border-radius: 100px;
    animation:moonlight 5s linear;

}
@-webkit-keyframes moonlight {
    0% {-webkit-box-shadow:0 0 10px #FFFFFF;}
    30% {-webkit-box-shadow:0 0 15px #FFFFFF;}
    40% {-webkit-box-shadow:0 0 20px #FFFFFF;}
    50% {-webkit-box-shadow:0 0 25px #FFFFFF;}
    100% {-webkit-box-shadow:0 0 30px #FFFFFF;}
}

看一下最终效果：

月亮升起.gif