纯css实现下雪特效
//------------------ 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实现下雪特效的更多相关文章
- 纯css实现翻牌特效
大家有没有看到过网上很炫的翻牌效果,牌正面对着我们,然后点击一下,牌就被翻过来了,效果很酷炫,是不是很想知道是怎么实现的么,代码很简单,跟着小编往下走. 先给大家介绍一下翻牌的原理: 1.父容器设置设 ...
- iHover – 30+ 纯 CSS 实现的超炫的图片悬停特效
iHover 是一个令人印象深刻的图片悬停效果集合,完全基于 CSS3 实现,无依赖,能够搭配 Bootstrap 3 很好地工作.基于 SCSS 技术构建,便于修改变量.有模块化的代码,无需包含整个 ...
- CSS3实战开发: 纯CSS实现图片过滤分类显示特效
原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...
- 3.纯 CSS 创作一个容器厚条纹边框特效
原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...
- 2.纯 CSS 创作一个矩形旋转 loader 特效
原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR 扩展地址:https://codepen.io/pen/ HT ...
- 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)
原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...
- 纯CSS + 媒体查询实现网页导航特效
纯css+媒体查询实现网页导航特效 附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...
- 纯CSS实现的风车转动效果特效演示
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 如何使用纯CSS制作特效导航条?
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
随机推荐
- webpack的npm扩展使用
一.NPM的扩展使用 (1) npm init:初始化一个Node.js项目------创建必须的package.json文件 npm init -y:创建必须的package.json文件 (2) ...
- mysql字符集那些事
1..查看mysql当前使用的字符集. 登录mysql 在mysql 里输入 show variables like 'character_set%' mysql> show variables ...
- Docker学习-VMware Workstation 本地多台虚拟机互通,主机网络互通,解决name or service not known
NAT网络通用配置 测试连接 主机到虚拟机 虚拟机到虚拟机 ,虚拟机到外网 CentOS,提示name or service not known 设置DNS服务器 vi /etc/resolv.co ...
- 微信APP支付【签名失败】
最近在做微信APP支付 遇到一个问题 请求预下单时,接口返回签名错误 由于之前没有成功的交互,刚开始检查程序的错误,经过多次修改,发现依然是签名错误,可能出现的问题如下: 1.该签名密钥不是AppSe ...
- My First Cloud Application's Design
Structure Diagram as following: Questions list: 1. Skydrive Integration > Based on the MSDN commu ...
- nyoj 991 Registration system (map)
Registration system 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 A new e-mail service "Berlandesk&q ...
- 编译spark支持thriftserver
cdh默认把spark的spark-sql以及hive-thriftserver给弃用掉了,想玩玩thriftserver,于是自己重新编译一个 官网参考: http://spark.apache.o ...
- 记一次YUV图像分析(二)
当你有一帧图像的原始(Raw)数据,不知道是RGB像素图还YUV格式时,可以利用YUV的灰度图成块状能量的特点(这也是为什么YUV格式可以被压缩编码的原因),进行简单的分辨. 当你用hexdump一类 ...
- windows下搭建dubbo 环境(dubbo-admin和服务提供者消费者)
---恢复内容开始--- 一. dubbo-admin管理控制台 从 https://github.com/apache/dubbo-admin clone项目到本地. 修改dubbo-admin- ...
- Python练习100题
Python练习100题 题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? #Filename:001.py cnt = 0#count the sum of res ...