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 相关文章推荐
Javascript 判断Flash是否加载完成的代码
Apr 12 Javascript
JavaScript的parseInt 取整使用
May 09 Javascript
jQuery实现可拖动的浮动层完整代码
May 27 Javascript
js打造数组转json函数
Jan 14 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
JS弹出窗口的运用与技巧大全
Nov 01 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
javascript中数组的常用算法深入分析
Mar 12 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
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
农民C键的运用技巧
2020/03/04 星际争霸
php json_encode值中大括号与花括号区别
2013/09/30 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
JS常用算法实现代码
2016/11/14 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
2019/07/05 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
python实现识别相似图片小结
2016/02/22 Python
tensorflow更改变量的值实例
2018/07/30 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
python获取Linux发行版名称
2019/08/30 Python
pycharm的python_stubs问题
2020/04/08 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
P/Invoke是什么
2015/07/31 面试题
运动会开幕式邀请函
2014/02/03 职场文书
优秀女职工事迹材料
2014/02/06 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
合伙购房协议样本
2014/10/06 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
Java tomcat手动配置servlet详解
2021/11/27 Java/Android
关于CSS自定义属性与前端页面的主题切换问题
2022/03/21 HTML / CSS
零基础学java之循环语句的使用
2022/04/10 Java/Android