用CSS代碼實(shí)現(xiàn)超美星空特效
大家好，我是Ned??，一個(gè)剛剛?cè)腴T(mén)前端未滿(mǎn)兩年的大三小學(xué)生??
未來(lái)路還長(zhǎng)??, 一起努力加油吧?~
前言
最近真是越來(lái)越對(duì)CSS感興趣了，于是再來(lái)整一手，夜晚的星星，再配合上皎潔的月光，這唯美的星空，它來(lái)了！
今天帶領(lǐng)大家，用CSS實(shí)現(xiàn)一下，這美麗的星空。
開(kāi)始實(shí)現(xiàn)星空
我是找了張圖片，這畢竟功力有限，目前還不能人造星~，下面說(shuō)一下如何將它放置在夜空中，并實(shí)現(xiàn)眨眼睛的效果：
運(yùn)用了一個(gè)span標(biāo)簽，將此圖片作為其背景圖，來(lái)生成星星：
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 + ')';
}
復(fù)制代碼先獲取屏幕寬高，完后用上隨機(jī)數(shù)使得星星的位置隨機(jī)，大小隨機(jī)，頻率隨機(jī)。
會(huì)眨眼睛的才是好星星
星星還要是一眨一眨的，才好看，所以我們給它加上一個(gè)動(dòng)畫(huà)，更改其的透明度就好：
@keyframes flash {
0%{opacity: 0;}
100%{opacity: 1;}
}
復(fù)制代碼但是我們很快發(fā)現(xiàn)一個(gè)問(wèn)題，就是它太過(guò)于整齊劃一：
我們?cè)谏尚切堑臅r(shí)候，給它每一個(gè)的延遲頻率隨機(jī)一下，這樣就能保證它們有一種參差錯(cuò)落的感覺(jué)。
var rate = Math.random() * 1.5;
span.style.animationDelay = rate + 's';
復(fù)制代碼現(xiàn)在來(lái)看看我們美麗的星空吧~：
最后再給星星加一個(gè)hover效果，將其放大一點(diǎn)，完后旋轉(zhuǎn)個(gè)180
span:hover{
transform: scale(3, 3) rotate(180deg) !important;
transition: all 1s;
}
復(fù)制代碼
開(kāi)始實(shí)現(xiàn)月亮
一個(gè)美麗的夜晚，天空中除了星星，應(yīng)當(dāng)還有月亮：月亮主要是兩個(gè)動(dòng)畫(huà)，一個(gè)是從左下往右上移動(dòng)，達(dá)到一個(gè)月亮升起的效果，另一個(gè)是隨著升起，月亮周?chē)墓廨x變得越來(lái)越亮眼。
做法：將月亮放到一個(gè)容器中，用容器來(lái)做移動(dòng)的特效，月亮本身只關(guān)注光輝就好。
id="wrapper">
id="circle">
復(fù)制代碼#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;}
}
復(fù)制代碼看一下最終效果：
寫(xiě)在最后
如果覺(jué)得本文對(duì)你有幫助，點(diǎn)個(gè)贊支持一下吧?~
啊沒(méi)錯(cuò)，這就是整活系列第四彈...不知為何，我感覺(jué)這個(gè)系列就是一個(gè)CSS學(xué)習(xí)專(zhuān)欄
源自：https://juejin.cn/post/7044091542876717092
聲明：文章著作權(quán)歸作者所有，如有侵權(quán)，請(qǐng)聯(lián)系小編刪除。