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>

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

Javascript 相关文章推荐
jQuery each()小议
Mar 18 Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
处理文本部分内容的TextRange对象应用实例
Jul 29 Javascript
jQuery实现鼠标划过展示大图的方法
Mar 09 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
Javascript实现购物车功能的详细代码
May 08 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
原生js实现简单轮播图
Oct 26 Javascript
在antd4.0中Form使用initialValue操作
Nov 02 Javascript
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
You might like
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
php抽奖小程序的实现代码
2013/06/18 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
PHP加密解密实例分析
2015/12/25 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
实测jquery data()如何存值
2013/08/18 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
原生js实现购物车功能
2020/09/23 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
Python3读取文件常用方法实例分析
2015/05/22 Python
EM算法的python实现的方法步骤
2018/01/02 Python
Python中bisect的用法及示例详解
2020/07/20 Python
经理职责范文
2013/11/08 职场文书
公司端午节活动方案
2014/02/04 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
教师求职自荐信
2015/03/26 职场文书
招商银行收入证明
2015/06/17 职场文书
合作意向书范本
2019/04/17 职场文书
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL
全网非常详细的pytest配置文件
2022/07/15 Python