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 ...
随机推荐
- 2019-8-26-当-ASP.NET-Core-链接找不到时可能的原因
title author date CreateTime categories 当 ASP.NET Core 链接找不到时可能的原因 lindexi 2019-08-26 18:52:28 +0800 ...
- 2019-4-16-C#-使用反射获取私有属性的方法
title author date CreateTime categories C# 使用反射获取私有属性的方法 lindexi 2019-4-16 10:13:3 +0800 2018-09-26 ...
- [Hdu-5155] Harry And Magic Box[思维题+容斥,计数Dp]
Online Judge:Hdu5155 Label:思维题+容斥,计数Dp 题面: 题目描述 给定一个大小为\(N*M\)的神奇盒子,里面每行每列都至少有一个钻石,问可行的排列方案数.由于答案较大, ...
- (补充)06.Hibernate持久化类&持久化对象
持久化类:就是一个Java类(JavaBean),这个类与表建立映射关系就可以成为是持久类 持久化类 = JavaBean + xxx.hbm.xml 编写规则: 1.提供一个无参数,public访问 ...
- Python pylint的安装和使用
Pylint 是一个 Python 代码分析工具,它分析 Python 代码中的错误,查找不符合代码风格标准和有潜在问题的代码. Pylint 是一个 Python 工具,除了平常代码分析工具的作用之 ...
- ERROR:ORA-30076: 对析出来源无效的析出字段
DEBUG:key: sql: select count(*) as col_0_0_ from jc_user cmsuser0_ where 1=1 and cmsuser0_.register_ ...
- IO流15 --- 数据流操作Java语言的基本数据类型 --- 技术搬运工(尚硅谷)
写入数据 @Test public void test10() throws IOException { DataOutputStream dos = new DataOutputStream(new ...
- 进一步封装poco下的mysql操作
为方便程序对mysql操作,我对poco的mysql进行了再次封装,主要是针对自己应用需要的部分. 开发工具:netbean 系统环境:centos7 poco版本: poco-1.9.0-all 主 ...
- 2.快速创建springboot项目 连pom文件里面的配置都不用配了
无论是创建项目 还是module 模块 选择这个 .然后在后面的选择中选择自己要的功能 就可以把相关的依赖都加进去 省去了依赖 其后的写法跟第一篇一样 在这个项目下面有一个配置文件 ====>a ...
- 2019-8-31-dotnet-通过-WMI-获取指定进程的输入命令行
title author date CreateTime categories dotnet 通过 WMI 获取指定进程的输入命令行 lindexi 2019-08-31 16:55:59 +0800 ...