這篇文章主要介紹了CSS+JS實(shí)現(xiàn)浪漫流星雨動(dòng)畫效果的方法是什么，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
網(wǎng)站的建設(shè)成都創(chuàng)新互聯(lián)專注網(wǎng)站定制,經(jīng)驗(yàn)豐富,不做模板,主營網(wǎng)站定制開發(fā).小程序定制開發(fā),H5頁面制作!給你煥然一新的設(shè)計(jì)體驗(yàn)!已為展覽展示等企業(yè)提供專業(yè)服務(wù)。
首先我們來看看效果圖：
下面我們來看看如何實(shí)現(xiàn)：
HTML代碼：
重慶分公司
重慶分公司
< body >
< p class = “container” >
< p id = “mask” >
< p id = “sky” >
< p id = “moon” >
< p id = “stars” >
< p class = “cloud cloud-1” >
< p class = “cloud cloud-3” >
CSS代碼：
/* - - - - - - 重啟 - - - - - - */
* {
保證金：0 ;
填充：0 ;
}
html，
body {
width：100％ ;
最小寬度：1000px ;
身高：100％ ;
最小高度：400px ;
溢出：隱藏;
}
/ * ------------畫布------------ * /
.container {
position：relative;
身高：100％ ;
}
/ *遮罩層* /
#mask {
position：absolute;
寬度：100％ ;
身高：100％ ;
background：rgba（0,0,0，.8）;
z-index：900 ;
}
/ *天空背景* /
#sky {
width：100％ ;
身高：100％ ;
background：線性漸變（rgba（0,150,255,1），rgba（0,150,255，.8），rgba（0,150,255，.5））;
}
/ *月亮* /
#moon {
position：absolute;
上：50px ;
右：200px ;
寬度：120px ;
身高：120px ;
背景：rgba（251,255,25,0.938）;
border-radius：50％ ;
box-shadow：0 0 20px rgba（251,255,25,0.5）;
z-index：9999 ;
}
/ *閃爍星星* /
.blink {
position：absolute;
background：rgb（255,255,255）;
border-radius：50％ ;
box-shadow：0 0 5px rgb（255,255,255）;
不透明度：0 ;
z-index：10000 ;
}
/ *流星* /
.star {
position：absolute;
不透明度：0 ;
z-index：10000 ;
}
.star :: after {
content：“” ;
顯示：塊;
邊界：堅(jiān)固;
border-width：2px 0 2px 80px ;
/ *流星隨長度逐漸縮小* /
border-color：透明透明透明rgba（255,255,255,1）;
border-radius：2px 0 0 2px ;
transform：rotate（-45deg）;
transform-origin：0 0 0 ;
盒子陰影：0 0 20px rgba（255,255,255，.3）;
}
/ *云* /
.cloud {
position：absolute;
寬度：100％ ;
身高：100px ;
}
.cloud-1 {
bottom： - 100px ;
z-index：1000 ;
不透明度：1 ;
變換：規(guī)模（1.5）;
-webkit-transform：scale（1.5）;
-moz-transform：scale（1.5）;
-ms-transform：scale（1.5）;
-o-transform：scale（1.5）;
}
.cloud-2 {
left： - 100px ;
底部： - 50px ;
z-index：999 ;
不透明度：。5 ;
變換：旋轉(zhuǎn)（7deg）;
-webkit-transform：rotate（7deg）;
-moz-transform：rotate（7deg）;
-ms-transform：rotate（7deg）;
-o-transform：rotate（7deg）;
}
.cloud-3 {
left：120px ;
底部： - 50px ;
z-index：999 ;
不透明度：。1 ;
transform：rotate（-10deg）;
-webkit-transform：rotate（-10deg）;
-moz-transform：rotate（-10deg）;
-ms-transform：rotate（-10deg）;
-o-transform：rotate（-10deg）;
}
.circle {
position：absolute;
border-radius：50％ ;
背景：#fff ;
}
.circle-1 {
width：100px ;
身高：100px ;
上： - 50px ;
左：10px ;
}
.circle-2 {
width：150px ;
身高：150px ;
上： - 50px ;
左：30px ;
}
.circle-3 {
width：300px ;
身高：300px ;
上： - 100px ;
左：80px ;
}
.circle-4 {
width：200px ;
身高：200px ;
上： - 60px ;
左：300px ;
}
.circle-5 {
width：80px ;
身高：80px ;
上： - 30px ;
左：450px ;
}
.circle-6 {
width：200px ;
身高：200px ;
上： - 50px ;
左：500px ;
}
.circle-7 {
width：100px ;
身高：100px ;
上： - 10px ;
左：650px ;
}
.circle-8 {
width：50px ;
身高：50px ;
上：30px ;
左：730px ;
}
.circle-9 {
width：100px ;
身高：100px ;
上：30px ;
左：750px ;
}
.circle-10 {
width：150px ;
身高：150px ;
上：10px ;
左：800px ;
}
.circle-11 {
width：150px ;
身高：150px ;
上： - 30px ;
左：850px ;
}
.circle-12 {
width：250px ;
身高：250px ;
上： - 50px ;
左：900px ;
}
.circle-13 {
width：200px ;
身高：200px ;
上： - 40px ;
左：1000px ;
}
.circle-14 {
width：300px ;
身高：300px ;
上： - 70px ;
左：1100px ;
}JS代碼：
//流星動(dòng)畫
setInterval（function（） {
const obj = addChild（“#sky”，“p”，2，“star”）;
for（let i = 0 ; i {
obj.parent.removeChild（obj.children [I]）;
}
}）
}
}）;
}
}，1000）;
//閃爍星星動(dòng)畫
setInterval（function（） {
const obj = addChild（“#stars”，“p”，2，“blink”）;
for（let i = 0 ; i 封裝方法：
// -------------------------------------------動(dòng)畫---- -----------------------------------------------
//運(yùn)動(dòng)動(dòng)畫，調(diào)用Tween.js
// ele：dom | 班級| id | 標(biāo)簽節(jié)點(diǎn)| 類名| id名| 標(biāo)簽名，只支持選擇一個(gè)節(jié)點(diǎn)，類類名以及標(biāo)簽名只能選擇頁面中第一個(gè)
// attr：屬性屬性名
//值：目標(biāo)值目標(biāo)值
//時(shí)間：持續(xù)時(shí)間持續(xù)時(shí)間
//補(bǔ)間：定時(shí)function函數(shù)方程
// flag：Boolean判斷是按值移動(dòng)還是按位置移動(dòng)，默認(rèn)按位置移動(dòng)
// fn：callback回調(diào)函數(shù)
//增加返回值：將內(nèi)部參數(shù)對象返回，可以通過設(shè)置返回對象的屬性stop為true打斷動(dòng)畫
函數(shù) requestAnimation（obj） {
// -------------------------------------參數(shù)設(shè)置---------------------------------------------
//默認(rèn)屬性
const參數(shù)= {
ele：null，
attr：null，
value：null，
time：1000，
tween：“l(fā)inear”，
flag：true，
stop：false，
fn：“”
}
//合并傳入屬性
Object .assign（parameter，obj）; //覆蓋重名屬性
// -------------------------------------動(dòng)畫設(shè)置--------- ------------------------------------
//創(chuàng)建運(yùn)動(dòng)方程初始參數(shù)，方便復(fù)用
let start = 0 ; //用于保存初始時(shí)間戳
let target =（typeof parameter.ele === “string”？document .querySelector（parameter.ele）：parameter.ele），//目標(biāo)節(jié)點(diǎn)
attr = parameter.attr，//目標(biāo)屬性
beginAttr = parseFloat（getComputedStyle（target）[attr]），// attr起始值
value = parameter.value，//運(yùn)動(dòng)目標(biāo)值
count = value - beginAttr，//實(shí)際運(yùn)動(dòng)值
time = parameter.time，//運(yùn)動(dòng)持續(xù)時(shí)間，
tween = parameter.tween，//運(yùn)動(dòng)函數(shù)
flag = parameter.flag，
callback = parameter.fn，//回調(diào)函數(shù)
curVal = 0 ; //運(yùn)動(dòng)當(dāng)前值
//判斷傳入函數(shù)是否為數(shù)組，多段運(yùn)動(dòng)
（function（） {
if（attr instanceof Array）{
beginAttr = [];
count = [];
對于（讓我的 ATTR）{
常量 VAL = parseFloat（的getComputedStyle（目標(biāo)）[I]）;
beginAttr.push（VAL）;
count.push（value - val）;
}
}
if（value instanceof Array）{
for（let i in value）{
count [i] = value [i] - beginAttr [i];
}
}
}）（）;
//運(yùn)動(dòng)函數(shù)
功能 動(dòng)畫（時(shí)間戳） {
如果（parameter.stop）返回 ; //打斷
//存儲(chǔ)初始時(shí)間戳
if（！start）start = timestamp;
//已運(yùn)動(dòng)時(shí)間
讓 t =時(shí)間戳 - 開始;
//判斷多段運(yùn)動(dòng)
if（beginAttr instanceof Array）{
// const len = beginAttr.length //存數(shù)組長度，復(fù)用
//多段運(yùn)動(dòng)第1類 - 多屬性，同目標(biāo)，同時(shí)間/不同時(shí)間
if（typeof count === “number”）{ //同目標(biāo)
//同時(shí)間
if（typeof time === “number”）{
if（t> time）t = time; //判斷是否超出目標(biāo)值
//循環(huán)attr，分別賦值
為（let i in beginAttr）{
if（flag）curVal = Tween [tween]（t，beginAttr [i]，count，time）; //調(diào)用Tween，返回當(dāng)前屬性值，此時(shí)計(jì)算方法為移動(dòng)到
寫入位置else curVal = Tween [tween]（t，beginAttr [i]，count + beginAttr [i]，time）; //調(diào)用Tween，返回當(dāng)前屬性值，此時(shí)計(jì)算方法為移動(dòng)了
寫入距離if（attr [i] === “opacity”）target.style [attr [i]] = curVal; //給屬性賦值
else target.style [attr [i]] = curVal + “px” ; //給屬性賦值
if（t time [i]）t = time [i]; //判斷是否超出目標(biāo)值
if（flag || attr [i] === “opacity”）curVal = Tween [tween]（t，beginAttr [i]，count，i）; //調(diào)用Tween，返回當(dāng)前屬性值，此時(shí)計(jì)算方法為移動(dòng)到
寫入位置else curVal = Tween [tween]（t，beginAttr [i]，count + beginAttr [i]，i）; //調(diào)用Tween，返回當(dāng)前屬性值，此時(shí)計(jì)算方法為移動(dòng)了
寫入距離if（attr [i] === “opacity”）target.style [attr [i]] = curVal; //給屬性賦值
else target.style [attr [i]] = curVal + “px” ; //給屬性賦值
}
if（t < Math .max（... time））requestAnimationFrame（animate）; //判斷函數(shù)是否運(yùn)動(dòng)完
其他回調(diào)&& callback（）; //如果已經(jīng)執(zhí)行完時(shí)間最長的動(dòng)畫，則調(diào)查回調(diào)函數(shù)
return ;
}
}
//多段運(yùn)動(dòng)第2類 - 多屬性，不同目標(biāo)，同時(shí)間/不同時(shí)間
if（count instanceof Array）{
//同時(shí)間
if（typeof time === “number”）{
if（t> time）t = time; //判斷是否超出目標(biāo)值
for（let i in beginAttr）{ //循環(huán)attr，count，分別賦值
//錯(cuò)誤判斷
if（！count [i] && count [i]！== 0）{
throw new Error（
“輸入值的長度不是等于屬性的長度“）;
}
if（flag || attr [i] === “opacity”）curVal = Tween [tween]（t，beginAttr [i]，count [i]，time）; //調(diào)用Tween，返回當(dāng)前屬性值，此時(shí)計(jì)算方法為移動(dòng)到
寫入位置else curVal = Tween [tween]（t，beginAttr [i]，count [i] + beginAttr [i]，time）; //調(diào)用Tween，返回當(dāng)前屬性值，此時(shí)計(jì)算方法為移動(dòng)了
寫入距離if（attr [i] === “opacity”）target.style [attr [i]] = curVal; //給屬性賦值
else target.style [attr [i]] = curVal + “px” ; //給屬性賦值
}
if（t time [i]）t = time [i]; //判斷是否超出目標(biāo)值
//錯(cuò)誤判斷
if（！count [i] && count [i]！== 0）{
throw new Error（
“輸入值的長度不等于屬性的長度”）;
}
if（flag || attr [i] === “opacity”）curVal = Tween [tween]（t，beginAttr [i]，count [i]，time [i]）; //調(diào)用Tween，返回當(dāng)前屬性值，此時(shí)計(jì)算方法為移動(dòng)到
寫入位置其他 curVal = Tween [tween]（t，beginAttr [i]，count [i] + beginAttr [i]，time [i]） ; //調(diào)用Tween，返回當(dāng)前屬性值，此時(shí)計(jì)算方法為移動(dòng)了
寫入距離if（attr [i] === “opacity”）target.style [attr [i]] = curVal;
否則 target.style [attr [i]] = curVal + “px” ;
}
if（t < Math .max（... time））requestAnimationFrame（animate）;
else callback && callback（）;
回歸 ;
}
}
}
//單運(yùn)動(dòng)模式
if（t> time）t = time;
if（flag || attr === “opacity”）curVal = Tween [tween]（t，beginAttr，count，time）; //調(diào)用Tween，返回當(dāng)前屬性值，此時(shí)計(jì)算方法為移動(dòng)到
寫入位置else curVal = Tween [tween]（t，beginAttr [i]，count + beginAttr，time）; //調(diào)用Tween，返回當(dāng)前屬性值，此時(shí)計(jì)算方法為移動(dòng)了
寫入距離if（attr === “opacity”）target.style [attr] = curVal;
否則 target.style [attr] = curVal + “px” ;
if（t 案例解析
HTML
由于節(jié)點(diǎn)很多，并且我想盡量做得逼真有趣有點(diǎn)，還給節(jié)點(diǎn)加了隨機(jī)位置。所以節(jié)點(diǎn)的輸出都是用JS控制的，HTML這邊只寫了幾個(gè)父元素盒子，加上相應(yīng)的ID名和類類名，結(jié)構(gòu)相對簡單。
CSS
CSS部分的難點(diǎn)就是流星的樣式和用圈圈畫云層，然后將云層堆疊出立體效果。
首先說一下流星的樣式：
#sky .star {
position：absolute;
不透明度：0 ;
z-index：10000 ;
}
.star :: after {
content：“” ;
顯示：塊;
邊界：堅(jiān)固;
border-width：2px 0 2px 80px ;
/ *流星隨長度逐漸縮小* /
border-color：透明透明透明rgba（255,255,255,1）;
border-radius：2px 0 0 2px ;
transform：rotate（-45deg）;
transform-origin：0 0 0 ;
盒子陰影：0 0 20px rgba（255,255,255，.3）;
}先提取了公共樣式，添加定位屬性;
然后在星后通過后偽類添加流星，用邊界特性畫：
1）模型繪制：border-width的順序?yàn)樗倪卼op，right，bottom，left，同理border-color的順序也為四邊top，right，bottom，left。這樣將border-width與border-color一一對應(yīng)后，就能看出2px的是流星的寬度，80px是流星的長度，而0像素流星就是尾巴的這樣就形成了一個(gè)。頭部2px的寬，尾部0像素，長度80px的流星模型 ;
2）稍微逼真：通過邊界半徑？給流星的頭部增加個(gè)圓角，讓它看起來更逼真最后通過roteta旋轉(zhuǎn)一個(gè)角度，讓它看起來像是往下掉;
3）增加閃光：通過箱陰影給流星增加一點(diǎn)光暈，讓它看起來有閃光的效果;
通過以上3步，一個(gè)流星就畫好了。
然后是畫云：
因?yàn)樵频拇a比較長，這里就不貼出來了方法無非是通過一個(gè)一個(gè)的圓，相互疊加覆蓋，完成一個(gè)云朵的形狀。
完成一個(gè)云層之后，copy一個(gè)，然后多個(gè)云層通過rotate，opacity，left定位等，做出一個(gè)漸隱疊加的立體效果;
JS
JS部分以流星舉例說明
setInterval（function（） {
const obj = addChild（“#sky”，“p”，2，“star”）; //插入流星
for（let i = 0 ; i {
obj.parent.removeChild（obj.children [I]）; //動(dòng)畫結(jié)束刪除節(jié)點(diǎn)
}
}）
}
}）;
}
}，1000）; 這里邊用到了我自己封裝的兩個(gè)方法，一個(gè)是基于requestAnimationFrame的requestAnimation，以及基于appendChild的addChild。
為了達(dá)成星星位置隨機(jī)的效果，通過定時(shí)器的setInterval的不停插入與刪除流星：
首先，每次添加2個(gè)流星到頁面，但是定時(shí)器的間隔時(shí)間小于流星的動(dòng)畫時(shí)間，這樣就能保證頁面中的流星的數(shù)量不是一個(gè)固定值，但肯定是大于2的。不然一次2個(gè)流星略顯冷清;
然后，通過對循環(huán)（也可以用為式，換的，都行。對于-的最簡單）給每個(gè)新添加到頁面中的流星一個(gè)隨機(jī)的位置（頂部，左側(cè)），隨機(jī)的大小（規(guī)模），隨機(jī)的動(dòng)畫執(zhí)行時(shí)間（定時(shí)器）;
最后，在用于循環(huán)中，給每個(gè)新添加到頁面中的流星加上動(dòng)畫，并通過回調(diào)函數(shù)在執(zhí)行完動(dòng)畫后刪除節(jié)點(diǎn)。這里要注意的是，要?jiǎng)赢嫹殖蓛蓚€(gè)階段（出現(xiàn)與消失，主要是opacity控制）。另外我這里的處理，每個(gè)流星都移動(dòng)相同的距離300px，這個(gè)距離我覺得也可以通過隨機(jī)數(shù)控制，但我犯了個(gè)懶，就沒有做。
小問題
目前我發(fā)現(xiàn)的問題有2個(gè)：
一是DOM操作本身的問題頁面不停的添加與刪除節(jié)點(diǎn)，造成不停地?；亓髋c重繪，很耗性能;
二是requestAnimationFrame本身的問題因?yàn)槎〞r(shí)器不斷在添加節(jié)點(diǎn)，而requestAnimationFrame的特性- 當(dāng)離開當(dāng)前頁面去瀏覽其他頁面時(shí)，動(dòng)畫會(huì)暫停。這就造成了一個(gè)問題，節(jié)點(diǎn)一直在加，但動(dòng)畫全在停那沒有執(zhí)行那么下次再回到這個(gè)頁面的時(shí)候，就吊桿!!!動(dòng)畫就炸了，你會(huì)看到畫面一卡，很多小蝌蚪集體出動(dòng)去找媽媽。
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享CSS+JS實(shí)現(xiàn)浪漫流星雨動(dòng)畫效果的方法是什么內(nèi)容對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來學(xué)習(xí)!
當(dāng)前標(biāo)題：CSS+JS實(shí)現(xiàn)浪漫流星雨動(dòng)畫效果的方法是什么
文章轉(zhuǎn)載：http://weahome.cn/article/ggpoei.html
