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 处理表单元素的代码
Feb 15 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
JS清空多文本框、文本域示例代码
Feb 24 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
微信小程序实现折线图的示例代码
Jun 07 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 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
You might like
关于php内存不够用的快速解决方法
2013/10/26 PHP
PHP实现的json类实例
2015/07/28 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
python三元运算符实现方法
2013/12/17 Python
Python正则表达式匹配中文用法示例
2017/01/17 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
简单实现python聊天程序
2018/04/01 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
Python3 assert断言实现原理解析
2020/03/02 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
2014年结对帮扶工作总结
2014/12/17 职场文书
优秀团队申报材料
2014/12/26 职场文书
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis