快捷導(dǎo)航

js實(shí)現(xiàn)星星海特效的示例

更新時(shí)間：2020年09月28日 16:04:16 作者：君莫笑丶丶

這篇文章主要介紹了js實(shí)現(xiàn)星星海特效的示例，幫助大家制作網(wǎng)頁(yè)特效，感興趣的朋友可以了解下

首先需要獲取屏幕大?。?/p>

 var screenWidth = document.documentElement.clientWidth;
 var screenHeight = document.documentElement.clientHeight;

接著可以定義動(dòng)畫(huà)（星星透明度）：

@keyframes flash {
   0%{opacity: 0}
   25%{opacity: 0.25}
   50%{opacity: 0.5}
   75%{opacity: 0.75}
   100%{opacity: 1}
  }

全部代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  div{
   width: 70px;
   height: 80px;
   background: url("./images/star.jpg") no-repeat;
   animation: flash 1s;
  }
  body{
   background-color: black
  }
  @keyframes flash {
   0%{opacity: 0}
   25%{opacity: 0.25}
   50%{opacity: 0.5}
   75%{opacity: 0.75}
   100%{opacity: 1}
  }
 </style>
</head>
<body>

<script>
 var screenWidth = document.documentElement.clientWidth;
 var screenHeight = document.documentElement.clientHeight;
 // 生產(chǎn)50個(gè)星星
 for (let i = 0; i <50 ; i++) {
  var box=document.createElement('div');
  document.body.appendChild(box);
  x=Math.random()*screenWidth;
  y=Math.random()*screenHeight;
  box.style.position='relative';
  box.style.left=x+'px';
  box.style.right=y+'px';
 }
 boxList=document.getElementsByTagName("div");
 for (let i = 0; i < boxList.length; i++) {
  boxList[i].onmouseover=function () {
   this.style.transform='scale(1.5,1.5)';
  };
  boxList[i].onmouseout=function () {
   this.style.transform='scale(1,1)';
  };
 }
</script>
</body>
</html>

效果如下：

以上就是js實(shí)現(xiàn)星星海特效的示例的詳細(xì)內(nèi)容，更多關(guān)于js 星星海特效的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

JS forEach和map方法的用法與區(qū)別分析
這篇文章主要介紹了JS forEach和map方法的用法與區(qū)別,結(jié)合實(shí)例形式分析了forEach和map方法的功能、原理、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2019-02-02
bootstrap警告框使用方法解析
這篇文章主要為大家詳細(xì)介紹了bootstrap警告框使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
關(guān)于JS解構(gòu)的5種有趣用法
這篇文章主要給大家介紹了關(guān)于JS解構(gòu)的5種有趣用法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JS解構(gòu)具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
JavaScript實(shí)現(xiàn)動(dòng)態(tài)表格的方法詳解
這篇文章主要為大家介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)表格的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-01-01
代碼短小的js div層拖動(dòng)實(shí)現(xiàn)代碼[兼容IE與Firefox]
代碼短小的js div層拖動(dòng)實(shí)現(xiàn)代碼[兼容IE與Firefox],需要的朋友可以參考下.
2010-05-05
微信小程序動(dòng)態(tài)生成二維碼的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序動(dòng)態(tài)生成二維碼的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2018-07-07
深入淺析JavaScript中的in關(guān)鍵字和for-in循環(huán)
這篇文章主要介紹了JavaScript中的in關(guān)鍵字和for-in循環(huán)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-04-04
fetch 如何實(shí)現(xiàn)請(qǐng)求數(shù)據(jù)
這篇文章主要介紹了fetch 如何實(shí)現(xiàn)請(qǐng)求數(shù)據(jù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2018-12-12
深入理解js promise chain
下面小編就為大家?guī)?lái)一篇深入理解js promise chain。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
JavaScript數(shù)學(xué)對(duì)象Math操作數(shù)字的方法
這篇文章主要為大家介紹了JavaScript數(shù)學(xué)對(duì)象Math操作數(shù)字的方法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05