真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

如何使用CSS、JS實(shí)現(xiàn)浪漫流星雨動(dòng)畫

小編給大家分享一下如何使用CSS 、JS實(shí)現(xiàn)浪漫流星雨動(dòng)畫，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)提供高防主機(jī)、云服務(wù)器、香港服務(wù)器、成都服務(wù)器托管等

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：2px02px80px;

/*流星隨長度逐漸縮小*/

border-color：透明透明透明rgba（255,255,255,1）;border-radius：2px002px;transform：rotate（-45deg）;transform-origin：000;

盒子陰影：0020pxrgba（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（）{

constobj=addChild（“#sky”，“div”，2，“star”）;//插入流星

for（leti=0;i

consttop=-50+Math.random（）*200+“px”，

left=200+Math.random（）*1200+“px”，

scale=0.3+Math.random（）*0.5;

consttimer=1000+Math.random（）*1000;

obj.children[i].style.top=top;

obj.children[i].style.left=left;

obj.children[i].style.transform=`scale（${scale}）`;

//添加動(dòng)畫

requestAnimation（{

ele：obj.children[i]，

attr：[“top”，“l(fā)eft”，“opacity”]，

值：[150，-150，.8]，

time：timer，

flag：false，

fn：function（）{

requestAnimation（{

ELE：obj.children[I]，

ATTR：“頂”，“左”，“不透明”]，

值：[150，-150，0]，

時(shí)間：定時(shí)器，

標(biāo)志：假，

FN：（）=>{

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è)懶，就沒有做。

附上代碼：

HTML：

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：0020pxrgba（251,255,25,0.5）;

z-index：9999;

}

/*閃爍星星*/

.blink{position：absolute;background：rgb（255,255,255）;border-radius：50％;box-shadow：005pxrgb（255,255,255）;

不透明度：0;

z-index：10000;

}

/*流星*/

.star{position：absolute;

不透明度：0;

z-index：10000;

}

.star::after{content：“”;

顯示：塊;

邊界：堅(jiān)固;border-width：2px02px80px;

/*流星隨長度逐漸縮小*/

border-color：透明透明透明rgba（255,255,255,1）;border-radius：2px002px;transform：rotate（-45deg）;transform-origin：000;

盒子陰影：0020pxrgba（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（）{

constobj=addChild（“#sky”，“div”，2，“star”）;for（leti=0;i

consttop=-50+Math.random（）*200+“px”，

left=200+Math.random（）*1200+“px”，scale=0.3+Math.random（）*0.5;

consttimer=1000+Math.random（）*1000;

obj.children[i].style.top=top;

obj.children[i].style.left=left;

obj.children[i].style.transform=`scale（${scale}）`;

requestAnimation（{

ele：obj.children[i]，

attr：[“top”，“l(fā)eft”，“opacity”]，

值：[150，-150，.8]，time：timer，

flag：false，

fn：function（）{

requestAnimation（{

ELE：obj.children[I]，

ATTR：“頂”，“左”，“不透明”]，

值：[150，-150，0]，

時(shí)間：定時(shí)器，

標(biāo)志：假，

FN：（）=>{

obj.parent.removeChild（obj.children[I]）;

}

}）

}

}）;

}

}，1000）;

//閃爍星星動(dòng)畫

setInterval（function（）{

constobj=addChild（“#stars”，“div”，2，“blink”）;for（leti=0;i

consttop=-50+Math.random（）*500+“px”，

left=200+Math.random（）*1200+“px”，round=1+Math.random（）*2+“px”;

consttimer=1000+Math.random（）*4000;

obj.children[i].style.top=top;

obj.children[i].style.left=left;

obj.children[i].style.width=round;

obj.children[i].style.height=round;

requestAnimation（{

ele：obj.children[i]，

attr：“opacity”，

值：.5，time：timer，

flag：false，

fn：function（）{

requestAnimation（{

ele：obj.children[i]，

attr：“opacity”，

value：0，time：timer，

flag：false，

fn：function（）{

obj.parent.removeChild（obj.children[I]）;

}

}）;

}

}）;

}

}，1000）;

//月亮移動(dòng)

requestAnimation（{

ele：“＃moon”，

attr：“right”，

值：1200，

時(shí)間：10000000，

}）;

//添加云

constclouds=addChild（“。cloud”，“div”，14，“circle”，true）;for（leti=0;i

clouds.children[i][j].classList.add（`circle-${++j}`）;

}

}

//云動(dòng)畫letflag=1;

的setInterval（

功能（）{

constclouds=document.querySelectorAll（“。cloud”）;

constleft=Math.random（）*5;

bottom=Math.random（）*5;lettimer=0;for（leti=0;i

requestAnimation（{

ele：clouds[i]，

attr：[“l(fā)eft”，“bottom”]，

value：flag％2？[-left，-bottom]：[left，bottom]，time：timer+=500，

flag：false，

fn：function（）{

requestAnimation（{

ele：clouds[i]，

attr：[“l(fā)eft”，“bottom”]，

value：flag％2？[left，bottom]：[-left，-bottom]，time：timer，

flag：false

}）

}

}）;

}

標(biāo)志++;

}，2000）

以上是“如何使用CSS 、JS實(shí)現(xiàn)浪漫流星雨動(dòng)畫”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！


網(wǎng)站題目：如何使用CSS、JS實(shí)現(xiàn)浪漫流星雨動(dòng)畫
標(biāo)題網(wǎng)址：http://weahome.cn/article/gijgsh.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部