js流星雨效果
css部分
div { border: 0px solid #fff;
border-width: 0px 90px 2px 90px;
border-color: transparent transparent transparent rgba(255, 255, 255, .5);
box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
/*变形*/
transform: rotate(-135deg) translate3d(0px, 1px, 3px);
transform-origin: 0% 100%;
}
js部分
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientWidth;
function color(){//改变颜色
var c = ['0','3','6','9','c','f'];
var t = [c[Math.floor(Math.random()*100)%6],'0','f'];
console.log(t);
t.sort(function(){ //排序如果是1倒续
return Math.random()>0.5?-1:1;
}
);
return '#'+t.join('');
}
function fn(){//创建div
var b = document.createElement('div');
b.style.borderColor=' transparent transparent transparent'+color();
b.style.position = 'absolute';
b.style.top = 0;
b.style.left = Math.floor(Math.random()*w)+1+'px'; document.body.appendChild(b);
ydd() }
function ydd(){//运动和销毁
var div=document.getElementsByTagName('div');
for(var i=0; i<div.length;i++){
div[i].style.left=Math.ceil(Math.random()*9)+5+div[i].offsetLeft+'px';
div[i].style.top=Math.ceil(Math.random()*9)+20+div[i].offsetTop+'px';
if(div[i].offsetLeft>w || div[i].offsetTop>h){
div[i].parentNode.removeChild(div[i]);
}
}
console.log(div.length);
} setInterval(function(){
fn()
},100);
效果
js流星雨效果的更多相关文章
- JS原生效果瀑布流布局的实现(一)
JS原生效果 实现: HTML页面布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...
- js sleep效果
js sleep效果 s = setInterval(function(){ //需要执行的函数 alert("我延迟了2秒弹出"); },2000); 并不是每2秒执行一次,而是 ...
- JS打字效果的动态菜单代码分享
这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...
- js 动画效果实现
1. 实现方式 - 应用场景 自己写 - 简单的.不用 jq 的项目 jq - 普通动画 成熟插件 - 复杂动画 2. 相关文章 JavaScript基于时间的动画算法 九种原生js动画效果 Twee ...
- 页面倒计时跳转页面效果,js倒计时效果
页面倒计时跳转页面效果,js倒计时效果 >>>>>>>>>>>>>>>>>>>> ...
- 非常不错的一个JS分页效果代码
这里分享一个不错的js分页代码. 代码中cpage是页面计数,应为全局变量,可以随处调用它: totalpage是总页数. 与asp分页代码很类似,也是先取得记录总数,然后实现分页,基本的分页思路与原 ...
- 纯js倒计时效果(交流加群:452892873)(本群每天都更新学习资料)
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- js 技巧 (十)广告JS代码效果大全 【3】
3.[允许关闭] 与前面两个代码不同的是,广告图下方增加了一个图片按纽,允许访客点击关闭广告图片,下面文本框中就是实现效果所需代码: var delta=0.015; var coll ...
- js 技巧 (十)广告JS代码效果大全 【1】
广告JS代码效果大全 1.[普通效果] 现在很多网站广告做的如火如荼,现在我就来介绍一下常见的对联浮动广告效果的代码使用方法,介绍的这种效果,在1024*768分辨率下正常显示,在800*60 ...
随机推荐
- Free- Linux必学的60个命令
1.作用 free命令用来显示内存的使用情况,使用权限是所有用户. 2.格式 free [-b|-k|-m] [-o] [-s delay] [-t] [-V] 3.主要参数 -b -k -m:分别以 ...
- 玩转xargs
xargs命令可以把标准输入数据转换成命令行参数.也可以将单行或多行文本输入转换成其他格式,是构建单行命令的重要组件之一. xargs命令应该紧跟在管道操作符之后,以stdin作为主要的源数据流,使用 ...
- 机器学习之五 正则化的线性回归-岭回归与Lasso回归
机器学习之五 正则化的线性回归-岭回归与Lasso回归 注:正则化是用来防止过拟合的方法.在最开始学习机器学习的课程时,只是觉得这个方法就像某种魔法一样非常神奇的改变了模型的参数.但是一直也无法对其基 ...
- Shell执行SQL,并存入变量
shell的语法还是比较严格的(比如变量赋值,两边不能用等号) #!/bin/bash ids=$(mysql -h172. -uroot -p1qaz@WSX -N -e "select ...
- Hibernate-概述-搭建-测试-配置详解
一 hibernate概述 1.1 框架是什么 1.框架是用来提高开发效率的 2.封装了好了一些功能.我们需要使用这些功能时,调用即可.不需要再手动实现. 3.所以框架可以理解成是一个半成品的项目.只 ...
- Sql Server实现自动增长
在学习中遇到这个问题 数据库里有编号字段 BH00001 BH00002 BH00003 BH00004 如何实现自动增长 --下面的代码生成长度为8的编号,编号以BH开头,其余6位为流水号. --得 ...
- MyBatis框架的文件配置
第一步:log4j.properties的配置 原因:Mybatis的日志输出是依赖与log4j的,所以必须要配置 # Global logging configuration log4j.rootL ...
- JAVA面试常见问题之开源框架和容器篇
1.Servlet的生命周期 加载:加载到虚拟机 初始化:init() 一个生命周期中只会被调用一次. 服务:service() 销毁:destroy() 2.转发与重定向的区别 转发在服务器端完成的 ...
- (5)连续非周期信号的傅里叶变换(频谱) & 周期信号的傅里叶变换
参考资料:<信号与系统(第二版)> 杨晓非 何丰 从傅里叶级数到傅里叶变换 通过分析连续周期信号的周期与频谱的关系,当周期趋于无穷大的时候,周期信号变成非周期信号.从频谱分析观点来看,当T ...
- 通过游戏学python 3.6 第一季 第四章 实例项目 猜数字游戏--核心代码--猜测次数--随机函数和屏蔽错误代码--优化代码及注释 可复制直接使用 娱乐 可封装 函数
#猜数字--核心代码--猜测次数--随机函数和屏蔽错误代码---优化代码及注释 #!usr/bin/env python #-*-coding:utf-8-*- #QQ124111294 import ...