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