Less + HTML + JS實現流星劃過星空動畫

注：該動畫主要來自 https://100dayscss.com/?dayIndex=41 這個網址，只是裏面是 scss 實現的。本人比較

習慣 less ，就改用 less 了。

代碼在本人 GitHub 上，GitHub地址：https://github.com/cao-lianhui/CSS100day/tree/master/stars-42

在這先說明沒有 Less，記得先本地全局安裝下 Less，

在 cmd 命令行輸入：npm install -g less@2  表示安裝版本爲 3 以下的 Less，下面會說明爲什麼要安裝這個版本

Less 的一些基本使用，在本人 GitHub 上也有，有錯誤的歡迎指出😃

先上最終效果圖 ：）

 

1.首先是 Html 和 一些 Js 代碼的實現，主要看註釋就行

Html 代碼：

<div class="frame">
	<div class="stage"></div>
</div>

Js 代碼：

let stage = document.querySelector('.stage');
let strStar = '';
// 創建 300 個盒子，用作星星
for(let i = 0; i < 300; i++){
	strStar += '<div class="star star-'+(i+1)+'"></div>';
}
// 創建 6 個盒子，背景使用流星圖
for(let i = 0; i < 6; i++){
	strStar += '<div class="shooting-star shooting-star-'+(i+1)+'"></div>';
}
// 把星星和流星添加到頁面中
stage.innerHTML = strStar;

2.畫一個正方形居中盒子

.frame{
    position: absolute;
	top: 50%;
	left: 50%;
	width: 400px;
	height: 400px;
	margin-top: -200px;
	margin-left: -200px;
	border-radius: 2px;
	box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.1);
	overflow: hidden;
	background: #fff;
	color: #fff;
}

3.白色盒子中間通過漸變畫實現接近夜色的背景，代碼如下：

.stage{
    position: absolute;
	width: 280px;
	height: 280px;
	top: 60px;
	left: 60px;
	background: #1d4253;
	background: -moz-linear-gradient(top, #1d4253 0%, #6bb5c4 100%);
	background: -webkit-linear-gradient(top, #1d4253 0%, #6bb5c4 100%);
	background: linear-gradient(top, #1d42553 0%, #6bb5c4 100%);
	border-radius: 50%;
	overflow: hidden;
}

如下圖所示：

4.實現星星樣式和在星空上隨機分佈

.star{
    position: absolute;
	width: 1px;
	height: 1px;
	border-radius: 1px;
	background: #fff;
}
// 用函數實現星星隨機分佈
.showStar (@index) when (@index < @numberOfStars){
    // less 裏 css 類名拼接方式
	.star-@{index}{
	    // 隨機生成 top 和 left 的值，實現星星隨機分佈
		// 注意這裏需要用到 js 代碼，採用 `` 字符的方式存放 js 代碼
		// 且 less 版本必須要在 3 以下、必須要在 3 以下、3 以下
		@distance: `Math.round(Math.random() * 280)`;
	    top: ~"@{distance}px";
		left: ~"@{distance}px";
	}
	.showStar(@index+1);
}
// 函數調用
.showStar(1);

如下圖所示：

 

5.把流星圖加入頁面中，並用函數實現高度隨機分佈

// 加入流星圖
.shooting-star{
    position: absolute;
	top: 0;
	left: 0;
	width: 120px;
	height: 2px;
	background: url(./images/shooting-star.png) center center no-repeat;
	background-size: 100% 100%;
	transform: rotate(20deg);
}

// 用函數實現流星在星空中高度隨機分佈
.showShoot (@index) when (@index < @numberOfShootingStars){
    .shooting-star-@{index}{
	    // 高度隨機分佈在 -30px ~ 70px 之間
	    top: ~"`Math.random()*100 - 30`px";
		
	}
	.showShoot(@index+1);
}
.showShoot(1);

效果如下圖所示：(注：把類名 stage 的 border-radius 先註釋可以比較清楚的看到流星分佈)

然後隱藏流星，設置類名 shooting-star 的 left 值爲 -120px，和類名 stage 的 border-radius 

的值爲 50%，恢復到只有星星的夜空

6.接下來用 @keyframes 實現星星閃爍和流星劃過夜景的動畫：

// 實現星星在夜空中閃爍的動畫
@keyframes flickr{
    0%, 100%{
	    opacity: 1;
	}
	50%{
	    opacity: 0.2;
	}
}

// 流星劃過星空的動畫
@keyframes shooting-star{
    0%{
	    transform: translate3d(0,0,0) rotate(20deg);
	}
	10%, 100%{
	    transform: translate3d(451px, 164px, 0) rotate(20deg);
	}
}

這時需要在 .showStar 函數裏爲每個星星添加動畫，只要添加 animation 就可以了。如下所示

animation: ~"`Math.round((Math.random()*20+20)/10)`s" flickr ~"`Math.round(Math.random()*20/-10)`s" infinite;

效果如下圖所示：

同樣的在 .showShoot 函數裏添加 animation，實現流星劃過夜空的場景

animation: ~"`Math.round(Math.random()*5+20)`s" shooting-star ~"`Math.round(Math.random()*250)/10`s" infinite;

效果如下圖所示：

接下來可以擴展下流星效果，把流星效果擴展成整個頁面的，就像頁面剛開始看到的那樣

先改變類名 frame 和 stage 的樣式，主要是改變高度和寬度，還有 left top 值，如下所示

.frame{
    position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #fff;
	color: #fff;
}
.stage{
    position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #1d4253;
	background: -moz-linear-gradient(top, #1d4253 0%, #6bb5c4 100%);
	background: -webkit-linear-gradient(top, #1d4253 0%, #6bb5c4 100%);
	background: linear-gradient(top, #1d42553 0%, #6bb5c4 100%);
	overflow: hidden;
}

星星隨機分佈的 top 和 left 值需要改變，方便鋪滿頁面，星星的數量也要增加

下面是改過後的 showStar 函數

// 用函數實現星星隨機分佈
.showStar (@index) when (@index < @numberOfStars){
    // less 裏 css 類名拼接方式
	.star-@{index}{
	    // 隨機生成 top 和 left 的值，實現星星隨機分佈
		// 注意這裏需要用到 js 代碼，採用 `` 字符的方式存放 js 代碼
		// 且 less 版本必須要在 3 以下
		@distance: `Math.round(Math.random() * 2000)`;
	    top: ~"`Math.round(Math.random() * 600)`px";
		left: ~"@{distance}px";
		animation: ~"`Math.round((Math.random()*20+20)/10)`s" flickr ~"`Math.round(Math.random()*20/-10)`s" infinite;
	}
	.showStar(@index+1);
}
// 函數調用
.showStar(1);

// Js 代碼裏星星的數量由原來的 300 增加到 4000
// 創建 4000 個 div，用作星星
for(let i = 0; i < 4000; i++){
	strStar += '<div class="star star-'+(i+1)+'"></div>';
}

流星的數量和分佈值也要改變，下面是改過後的 shootStar 函數

// 用函數實現流星在星空中高度隨機分佈
.showShoot (@index) when (@index < @numberOfShootingStars){
    .shooting-star-@{index}{
		animation: ~"`Math.round(Math.random()*5+30)`s" shooting-star ~"`Math.round(Math.random()*250)/10`s" infinite;
	}
	.showShoot(@index+1);
}
.showShoot(1);

// 注意這時流星的 left 值有 Js 隨機生成，不在是改變 top 值，數量增加到 200
// Js代碼

for(let i = 0; i < 200; i++){
	strStar += '<div class="shooting-star shooting-star-'+(i+1)+'"></div>';
}
var shootStar = document.querySelectorAll('.shooting-star');
for(let i = 0; i < shootStar.length; i++){
	shootStar[i].style.left = Math.random()* 600 + 'px';
}

最後實現流星的動畫稍微改下，改成劃過夜空後漸漸消失，改變 opacity

如下所示:

@keyframes shooting-star{
    0%{
	    opacity: 1;
	    transform: translate3d(0,0,0) rotate(20deg);
	}
	10%, 100%{
	    opacity: 0;
	    transform: translate3d(851px, 364px, 0) rotate(20deg);
	}
}

大概的流程就是這些啦，有不懂的可以去 github 看代碼或者留言哦o(*￣▽￣*)ブ