编程 Javascript

JS实现星星海特效

Posted in Javascript onDecember 24, 2019

本文实例为大家分享了JS实现星星海特效的具体代码，供大家参考，具体内容如下

知识点

1.CSS使用@keyframes自定义动画，使用animation调用自定义动画

2.opacity 透明度。从 0.0 （完全透明）到 1.0（完全不透明）

3.CSS中transform

4.animation-delay 属性定义动画何时开始。

5.求屏幕尺寸

var 宽 = document.documentElement.clientWidth;
var 高 = document.documentElement.clientHeight;

6.JS创建节点

7.JS在某元素后追加节点

appendChild()

8.UnderScore.js通过_调用其中的API

运行效果

JS实现星星海特效

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="UnderScore.js"></script>
 <style>
  *{margin: 0;padding-top: 0}
  body{background-color: #000}
  span{
   width: 30px;
   height: 30px;
   background: url("star.png") no-repeat;
   position: absolute;
   background-size: contain;
   animation: flash 1s alternate infinite;
  }
  @keyframes flash{
   0%{opacity: 0}
   25%{opacity: 0.25}
   50%{opacity: 0.5}
   75%{opacity: 0.75}
   100%{opacity: 1}
  }
  span:hover{
   transform: scale(3, 3) rotate(180deg) !important;
   transition: all 1s;
  }
 </style>
</head>
<body>
<script>
 window.onload = function (ev) {
  // 1. 求出屏幕尺寸
  var screenWidth = document.documentElement.clientWidth;
  var screenHeight = document.documentElement.clientHeight;

  // 2. 动态创建10颗星星
  for (var i = 0; i < 200; i++) {
   // 2.1 创建星星
   var span = document.createElement('span');
   document.body.appendChild(span);

   // 2.2 随即坐标
   var x = parseInt(_.random(0, screenWidth));
   var y = parseInt(_.random(0, screenHeight));
   span.style.left = x +'px';
   span.style.top = y + 'px';

   // 2.3 随机缩放
   var scale = _.random(0, 1.5);
   span.style.transform = 'scale('+scale+','+scale+')';

   // 2.4 频率
   var rate = _.random(0, 1.5);
   span.style.animationDelay = rate + 's';
  }
 }
</script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

JS实现星星海特效

- Author -

KaiSarH

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

Javascript 相关文章推荐

使用原生javascript创建通用表单验证——更锋利的使用dom对象

Sep 13 Javascript

解决遍历时Array.indexOf产生的性能问题

Jul 03 Javascript

alert中断settimeout计时功能

Jul 26 Javascript

基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法

Jul 22 Javascript

Node.js中文件操作模块File System的详细介绍

Jan 05 Javascript

扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框

Feb 21 Javascript

基于JavaScript实现飘落星星特效

Aug 10 Javascript

关于Webpack dev server热加载失败的解决方法

Feb 22 Javascript

Vue项目History模式404问题解决方法

Oct 31 Javascript

基于Proxy的小程序状态管理实现

Jun 14 Javascript

JavaScript onclick事件使用方法详解

May 15 Javascript

vue中使用mockjs配置和使用方式

Apr 06 Vue.js

JS实现图片切换特效

Dec 23 #Javascript

JS实现简易留言板特效

Dec 23 #Javascript

JS实现关闭小广告特效

Jan 29 #Javascript

vue element-ui实现动态面包屑导航

Dec 23 #Javascript

vue实现图片上传预览功能

Dec 23 #Javascript

vue项目实现图片上传功能

Dec 23 #Javascript

Vue移动端实现图片上传及超过1M压缩上传

Dec 23 #Javascript