CSS

<style>
body { background: #eee; }
@keyframes mysnow {
0% { bottom: 100%; opacity: 0; }
50% { opacity: 1; transform: rotate(720deg);}
100% { transform: rotate(0deg); opacity: 0; bottom: 0%;}
}
.container { position: fixed; }
.pic { position: absolute; opacity: 0; animation: mysnow 5s;height: 30px; }
</style>

HTML

<div id="snowFlow" >
</div>

JS代码

<script>
window.onload=function(){
// snowFlow();
function snowFlow(left,height,src){
var container=document.createElement('div');
var pic=document.createElement('img');
var snowFlow=document.getElementById('snowFlow');
pic.className='pic';
container.className='container';
snowFlow.appendChild(container);
container.appendChild(pic);
container.style.left=left+'px';
container.style.height=height+'px';
pic.src=src;
setTimeout(function(){
snowFlow.removeChild(container);
},5000);
}
setInterval(function(){
var left=Math.random()*window.innerWidth;
var height=Math.random()*window.innerHeight;
var src = 'snow.png';
snowFlow(left,height,src);
},500) } </script>

基本思路:

在HTML中随机生成div,每个div都包含一张雪花图片,用随机数控制div的left和height,让它在一定时间内产生动画最终消失,动画效果用CSS的keyframes来控制(有兼容性!!!)。


【正在看本人博客的这位童鞋,我看你气度不凡,谈吐间隐隐有王者之气,日后必有一番作为!下面有个“顶”字,你就顺手把它点了吧(要先登录CSDN账号哦 )】


—–乐于分享,共同进步!

—–更多文章请看:http://blog.csdn.net/duruiqi_fx


[精简版]snowing snow的更多相关文章

  1. Linux上oracle精简版客户端快速部署

    RHEL6 + Oracle 11g客户端快速部署 需求:只是用到客户端的sqlplus, sqlldr功能. 方案:用精简版实现客户端的快速部署 1.上传oracle精简版客户端到服务器/tmp目录 ...

  2. ArcGIS10.2.1精简版、ArcGIS_Desktop10_Tutorial、破解文件等下载地址

    原版ArcGIS for Desktop的ISO文件一般都在4.5G以上,一般人用不上里面很多工具,下载回来又浪费时间,现推出ArcGIS10.2.1精简版(里面只包含主程序.Data Interop ...

  3. TeamViewer12.0.71503(远程控制软件)精简版 单文件企业版介绍

    TeamViewer 是一款能在任何防火墙和 NAT 代理的后台用于远程控制,桌面共享和文件传输的简单且快速的解决方案.为了连接到另一台计算机,只需要在两台计算机上同时运行 TeamViewer 即可 ...

  4. Log4j快速使用精简版

    Log4j快速使用精简版 1.导入log4j-1.2.17.jar包 2.在src根目录下创建log4j.properties文件 log4j.rootLogger=INFO, CONSOLE, FI ...

  5. VMware10.06精简版安装后台运行

    VMware10.06精简版安装时会出现一个安装功能选择菜单,里面有一条后台运行必选功能,一般人会跳过条.当你打算在服务器上用vmware时,一定要安装后台运行服务,否则你无法换出正在运行的后台虚拟机 ...

  6. [异常解决] ubuntu上安装虚拟机遇到的问题(vmware坑了,virtual-box简单安装,在virtual-box中安装精简版win7)

    利用周末时间将整个电脑格式化,换成了ubuntu系统- 所谓:扫清屋子再请客! 但是有些软件只在win上有,于是还是考虑装个虚拟机来个——逐步过度策略,一点点地从win上转移到linux上 我的系统是 ...

  7. 电脑公司最新GHOST WIN7系统32,64位优化精简版下载

    系统来自系统妈:http://www.xitongma.com 电脑公司最新GHOST win7系统32位优化精简版V2016年3月 系统概述 电脑公司ghost win7 x86(32位)万能装机版 ...

  8. TeamViewer12.0.71503(远程控制软件)精简版单文件企业版介绍

    TeamViewer 是一款能在任何防火墙和 NAT 代理的后台用于远程控制,桌面共享和文件传输的简单且快速的解决方案.为了连接到另一台计算机,只需要在两台计算机上同时运行 TeamViewer 即可 ...

  9. centos7精简版(minimal)killall: command not found

    centos7精简版(minimal)运行killall命令提示 command not found 是由于没有安装psmisc所致 Psmisc软件包包含三个帮助管理/proc目录的程序. 安装下列 ...

随机推荐

  1. php怎么返回json格式的数据

  2. 学习React系列(十)——Render Props

    解决问题:将行为封装,供多个组件使用(在多个组件之间分享某段代码) 组件中的props属性中包含一个"render"属性(该属性为一个返回值为元素的方法),然后在该组件的rende ...

  3. jquery checkbox勾选/取消勾选checked属性不生效问题

    http://www.cnblogs.com/KeenLeung/p/3799895.html

  4. [LeetCode] Tag Validator 标签验证器

    Given a string representing a code snippet, you need to implement a tag validator to parse the code ...

  5. shell编程-项目部署(二)

    上节我们讲了项目部署的准备工作,现在具体讲下代码部署 首先梳理下思路,大致是这样: 获取代码 打包代码 传输代码 关闭应用 解压文件 放置文件(备份老文件,放置新的文件) 开启应用 最后检查下 OK, ...

  6. 【实验吧】CTF_Web_简单的SQL注入之2

    直接输入11'报语法错误,然后输入1' and '1'='1 报SQLi detected!,说明有防护,输入1'and'1'='1回显ID: 1'and'1'='1  name: baloteli ...

  7. [Codeforces]856D - Masha and Cactus

    题目大意:给出一棵树和若干条可以加入的边,要求加入若干条边使图是仙人掌并且加入的边权和最大,仙人掌定义为没有一个点属于超过1个环.(n,m<=200,000) 做法:这题的仙人掌跟平时见到的不太 ...

  8. 【luogu3384】【模板】树链剖分

    省选被暴虐,成功爆0...顺便ditoly差点全省总分Rank1 orz..... 于是开始赶进度学新算法.... 然后决定开始学习树剖orz... 发现树剖很好用啊!!!! 然后做了模板题. 题目就 ...

  9. 关于非旋转treap的学习

    非旋转treap的操作基于split和merge操作,其余操作和普通平衡树一样,复杂度保证方式与旋转treap差不多,都是基于一个随机的参数,这样构出的树树高为\(logn\) split 作用:将原 ...

  10. [USACO Jan09] 安全路径

    Gremlins最近在农场上泛滥,它们经常会阻止牛们从农庄(牛棚_1)走到别的牛棚(牛_i的目的 地是牛棚_i).每一个gremlin只认识牛_i并且知道牛_i一般走到牛棚_i的最短路经.所以它 们在 ...