编程 Javascript

js实现星星海特效的示例

Posted in Javascript onSeptember 28, 2020

首先需要获取屏幕大小：

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

接着可以定义动画（星星透明度）：

@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;
 // 生产50个星星
 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实现星星海特效的示例

以上就是js实现星星海特效的示例的详细内容，更多关于js 星星海特效的资料请关注三水点靠木其它相关文章！

js实现星星海特效的示例

- Author -

君莫笑丶丶

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript小数计算出现近似值的解决办法

Feb 06 Javascript

JavaScript小技巧 2.5 则

Sep 12 Javascript

juqery 学习之六 CSS--css、位置、宽高

Feb 11 Javascript

用JS做的简单的可折叠的两级树形菜单

Sep 21 Javascript

JQuery为页面Dom元素绑定事件及解除绑定方法

Apr 23 Javascript

按钮接受回车事件的三种实现方法

Jun 06 Javascript

jQuery使用append在html元素后同时添加多项内容的方法

Mar 26 Javascript

jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

Jul 14 Javascript

js实现千分符和保留几位小数的简单实例

Aug 01 Javascript

jquery.cookie.js的介绍与使用方法

Feb 09 Javascript

Vue快速实现通用表单验证功能

Dec 05 Javascript

解决vuex刷新数据消失问题

Nov 12 Javascript

vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决

Sep 28 #Javascript

Openlayers绘制聚合标注

Sep 28 #Javascript

Openlayers绘制地图标注

Sep 28 #Javascript

Openlayers实现图形绘制

Sep 28 #Javascript

Openlayers显示瓦片网格信息的方法

Sep 28 #Javascript

Openlayers实现地图全屏显示

Sep 28 #Javascript

Openlayers学习之加载鹰眼控件

Sep 28 #Javascript