纯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,继续.这个效果是我在业务开发的 ...
随机推荐
- show语句大全
基于本人对MySQL的使用,现将常用的MySQL show 语句列举如下: 1.show databases ; // 显示mysql中所有数据库的名称 2.show tables [from dat ...
- solr 本地搭建
1. 运行 D:\solr-4.7.2\example --> java -jar start.jar 2. 添加插件IK D:\solr-4.7.2\example\solr-weba ...
- Win7安装pyenchant
pip3 install pyenchant==1.6.6 单纯的 pip3 install pyenchant报错
- nyoj 208 + poj 1456 Supermarket (贪心)
Supermarket 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 A supermarket has a set Prod of products on sal ...
- paper sharing :学习特征演化的数据流
特征演化的数据流 数据流学习是近年来机器学习与数据挖掘领域的一个热门的研究方向,数据流的场景和静态数据集的场景最大的一个特点就是数据会发生演化,关于演化数据流的研究大多集中于概念漂移检测(有监督学习) ...
- 附009.Kubernetes永久存储之GlusterFS独立部署
一 前期准备 1.1 基础知识 Heketi提供了一个RESTful管理界面,可以用来管理GlusterFS卷的生命周期.Heketi会动态在集群内选择bricks构建所需的volumes,从而确保数 ...
- Jmeter使用代理录制web
Jmeter有录制功能,录制HTTPs需要增加一个证书配置,录制步骤如下: 1.打开jmeter,添加线程组.线程组右键,逻辑控制器>录制控制器 工作台 右键 非测试元件 >HTTP代理服 ...
- inventory
1.设置主机的默认inventory mode. 2. 设置自动Populate 数据
- 手把手带你一键部署 Kubernetes + KubeSphere 至 Linux
本文介绍一个最快安装 Kubernetes 和体验 KubeSphere 核心功能的方式,all-in-one 模式可一键安装 Kubernetes v1.15.5 和 KubeSphere 至一台 ...
- MySQL基础知识面试与答案
1.Mysql 的存储引擎,myisam和innodb的区别. 答: 1.MyISAM 是非事务的存储引擎,适合用于频繁查询的应用.表锁,不会出现死锁,适合小数据,小并发. 2.innodb是支持事务 ...