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的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
js 数组实现一个类似ruby的迭代器
Oct 27 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
May 05 Javascript
浅谈JS函数定义方式的区别
Oct 30 Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
windows下vue-cli导入bootstrap样式
Apr 25 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 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下使用无限生命期Session的方法
2007/03/16 PHP
php中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
python获取图片颜色信息的方法
2015/03/18 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
python Xpath语法的使用
2020/11/26 Python
python中pickle模块浅析
2020/12/29 Python
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
网站推广策划方案
2014/06/04 职场文书
应急处置方案
2014/06/16 职场文书
护士求职信
2014/07/05 职场文书
代办出身证明书
2014/10/21 职场文书
大一新生检讨书
2014/10/29 职场文书
国庆节新闻稿
2015/07/17 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers