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流星雨效果的更多相关文章

  1. JS原生效果瀑布流布局的实现(一)

    JS原生效果 实现: HTML页面布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

  2. js sleep效果

    js sleep效果 s = setInterval(function(){ //需要执行的函数 alert("我延迟了2秒弹出"); },2000); 并不是每2秒执行一次,而是 ...

  3. JS打字效果的动态菜单代码分享

    这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...

  4. js 动画效果实现

    1. 实现方式 - 应用场景 自己写 - 简单的.不用 jq 的项目 jq - 普通动画 成熟插件 - 复杂动画 2. 相关文章 JavaScript基于时间的动画算法 九种原生js动画效果 Twee ...

  5. 页面倒计时跳转页面效果,js倒计时效果

    页面倒计时跳转页面效果,js倒计时效果 >>>>>>>>>>>>>>>>>>>> ...

  6. 非常不错的一个JS分页效果代码

    这里分享一个不错的js分页代码. 代码中cpage是页面计数,应为全局变量,可以随处调用它: totalpage是总页数. 与asp分页代码很类似,也是先取得记录总数,然后实现分页,基本的分页思路与原 ...

  7. 纯js倒计时效果(交流加群:452892873)(本群每天都更新学习资料)

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. js 技巧 (十)广告JS代码效果大全 【3】

    3.[允许关闭]     与前面两个代码不同的是,广告图下方增加了一个图片按纽,允许访客点击关闭广告图片,下面文本框中就是实现效果所需代码: var delta=0.015;     var coll ...

  9. js 技巧 (十)广告JS代码效果大全 【1】

    广告JS代码效果大全 1.[普通效果]     现在很多网站广告做的如火如荼,现在我就来介绍一下常见的对联浮动广告效果的代码使用方法,介绍的这种效果,在1024*768分辨率下正常显示,在800*60 ...

随机推荐

  1. mongodb什么时候使用

    转自:https://blog.csdn.net/justlpf/article/details/80392944 简介 MongoDB[1] 是一个基于分布式文件存储的数据库.由C 语言编写.旨在为 ...

  2. JS如何获取地址栏url后面的参数?

    本文不再更新,可能存在内容过时的情况,实时更新请移步我的新博客:JS如何获取地址栏url后面的参数?: 这里提供了两种获取地址栏url后面参数的方法: 方式1 传参: window.location. ...

  3. 如何解决mysql服务器load高

    .登录主机 # ssh hostname .确定是否是mysql导致 # top .查看是哪些sql正在慢查询 # mysql -h hostname -P port -u username # sh ...

  4. 【DM642学习笔记九】XDS560仿真器 Can't Initialize Target CPU

    以前用的瑞泰的ICETEK-5100USB仿真器,现在换成XDS560试了试,速度快多了.把720*576的图片在imgae中显示也只需要四五秒钟.而5100仿真器需要三四分钟. 仿真器驱动安好后,刚 ...

  5. Maven入门指南:仓库

    1 . 仓库简介 没有 Maven 时,项目用到的 .jar 文件通常需要拷贝到 /lib 目录,项目多了,拷贝的文件副本就多了,占用磁盘空间,且难于管理.Maven 使用一个称之为仓库的目录,根据构 ...

  6. [mybatis]Example的用法 标签: mybatis 2017-05-21 21:46 651人阅读 评论(11)

    Example类是什么? Example类指定如何构建一个动态的where子句. 表中的每个non-BLOB列可以被包括在where子句中. 例子是展示此类用法的最好方式. Example类可以用来生 ...

  7. Leetcode109. Convert Sorted List to Binary Search Tree有序链表转换二叉搜索树

    给定一个单链表,其中的元素按升序排序,将其转换为高度平衡的二叉搜索树. 本题中,一个高度平衡二叉树是指一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1. 示例: 给定的有序链表: [-10 ...

  8. Shell脚本编程中截取字符串方法

    例如: 假设变量var=http://www.baidu.com/111.png 1.#号截取(删左留右) echo ${var#*//} # 号是运算符,*// 表示从左边开始删除第一个 // 号及 ...

  9. 通过游戏学python 3.6 第一季 第六章 实例项目 猜数字游戏--核心代码--猜测次数--随机函数和屏蔽错误代码--优化代码及注释--简单账号密码登陆--账号的注册查询和密码的找回修改 可复制直接使用 娱乐 可封装 函数

    #猜数字--核心代码--猜测次数--随机函数和屏蔽错误代码---优化代码及注释--简单账号密码登陆--账号的注册查询和密码的找回修改 #猜数字--核心代码--猜测次数--随机函数和屏蔽错误代码---优 ...

  10. TZ_16_Vue的v-model和v-on

    1.v-model是双向绑定,视图(View)和模型(Model)之间会互相影响. 既然是双向绑定,一定是在视图中可以修改数据,这样就限定了视图的元素类型.目前v-model的可使用元素有: inpu ...