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 相关文章推荐
常用js脚本
Dec 03 Javascript
网页设计常用的一些技巧
Dec 22 Javascript
在chrome中window.onload事件的一些问题
Mar 01 Javascript
基于jquery的代码显示区域自动拉长效果
Dec 07 Javascript
JSON相关知识汇总
Jul 03 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
vue.js循环radio的实例
Nov 07 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 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
vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
2006/10/09 PHP
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
PHP+jquery+ajax实现分页
2016/12/09 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
vue实现弹幕功能
2019/10/25 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
Python函数学习笔记
2008/10/07 Python
整理Python中的赋值运算符
2015/05/13 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
HTML中meta标签及Keywords
2020/04/15 HTML / CSS
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
三年大学自我鉴定
2014/01/16 职场文书
网上快餐厅创业计划书
2014/02/01 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
档案信息化建设方案
2014/05/16 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
火烧圆明园观后感
2015/06/03 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS
Python 键盘事件详解
2021/11/11 Python