//------------------ css -------------------

/*Keyframes*/

@keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }

100% { background-position: 500px 1000px, 400px 400px, 300px 300px }
}

@-moz-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }

100% { background-position: 500px 1000px, 400px 400px, 300px 300px }
}

@-webkit-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }

50% { background-color: #b4cfe0 }

100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
background-color: #6b92b9;
}
}

@-ms-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }

100% { background-position: 500px 1000px, 400px 400px, 300px 300px }
}

#snow-animation-container {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 10000;
background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png');

-webkit-animation: snow 30s linear infinite;

-moz-animation: snow 30s linear infinite;
-ms-animation: snow 30s linear infinite;
animation: snow 30s linear infinite;
pointer-events:none;   //  击穿,此盒子下面的任何点击划过等交互事件,可以正常显示
}

//------------------  html -------------------

<div id="snow-animation-container">

</div>

/*如果觉得雪花过多,可以修改这三张图上雪花的密度,擦掉一些雪花*/

推荐一个搜索某些效果功能的网站:https://codepen.io/
各种snow动画   https://codepen.io/search/pens?q=snow&limit=all&type=type-pens  

纯css实现下雪特效的更多相关文章

  1. 纯css实现翻牌特效

    大家有没有看到过网上很炫的翻牌效果,牌正面对着我们,然后点击一下,牌就被翻过来了,效果很酷炫,是不是很想知道是怎么实现的么,代码很简单,跟着小编往下走. 先给大家介绍一下翻牌的原理: 1.父容器设置设 ...

  2. iHover – 30+ 纯 CSS 实现的超炫的图片悬停特效

    iHover 是一个令人印象深刻的图片悬停效果集合,完全基于 CSS3 实现,无依赖,能够搭配 Bootstrap 3 很好地工作.基于 SCSS 技术构建,便于修改变量.有模块化的代码,无需包含整个 ...

  3. CSS3实战开发: 纯CSS实现图片过滤分类显示特效

    原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...

  4. 3.纯 CSS 创作一个容器厚条纹边框特效

    原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...

  5. 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HT ...

  6. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  7. 纯CSS + 媒体查询实现网页导航特效

    纯css+媒体查询实现网页导航特效 附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...

  8. 纯CSS实现的风车转动效果特效演示

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 如何使用纯CSS制作特效导航条?

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

随机推荐

  1. webpack的npm扩展使用

    一.NPM的扩展使用 (1)  npm init:初始化一个Node.js项目------创建必须的package.json文件 npm init -y:创建必须的package.json文件 (2) ...

  2. mysql字符集那些事

    1..查看mysql当前使用的字符集. 登录mysql 在mysql 里输入 show variables like 'character_set%' mysql> show variables ...

  3. Docker学习-VMware Workstation 本地多台虚拟机互通,主机网络互通,解决name or service not known

     NAT网络通用配置 测试连接 主机到虚拟机 虚拟机到虚拟机 ,虚拟机到外网 CentOS,提示name or service not known 设置DNS服务器 vi /etc/resolv.co ...

  4. 微信APP支付【签名失败】

    最近在做微信APP支付 遇到一个问题 请求预下单时,接口返回签名错误 由于之前没有成功的交互,刚开始检查程序的错误,经过多次修改,发现依然是签名错误,可能出现的问题如下: 1.该签名密钥不是AppSe ...

  5. My First Cloud Application's Design

    Structure Diagram as following: Questions list: 1. Skydrive Integration > Based on the MSDN commu ...

  6. nyoj 991 Registration system (map)

    Registration system 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 A new e-mail service "Berlandesk&q ...

  7. 编译spark支持thriftserver

    cdh默认把spark的spark-sql以及hive-thriftserver给弃用掉了,想玩玩thriftserver,于是自己重新编译一个 官网参考: http://spark.apache.o ...

  8. 记一次YUV图像分析(二)

    当你有一帧图像的原始(Raw)数据,不知道是RGB像素图还YUV格式时,可以利用YUV的灰度图成块状能量的特点(这也是为什么YUV格式可以被压缩编码的原因),进行简单的分辨. 当你用hexdump一类 ...

  9. windows下搭建dubbo 环境(dubbo-admin和服务提供者消费者)

    ---恢复内容开始--- 一.  dubbo-admin管理控制台 从 https://github.com/apache/dubbo-admin clone项目到本地. 修改dubbo-admin- ...

  10. Python练习100题

    Python练习100题 题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? #Filename:001.py cnt = 0#count the sum of res ...