前言

最近真是越来越对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