纯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,继续.这个效果是我在业务开发的 ...
随机推荐
- Java程序线上故障排查
目录 一.Linux 内存和cpu 网络 磁盘 /proc文件系统 二.JVM Java堆和垃圾收集器 gc日志分析 JVMTI介绍 Attach机制 java自带工具 三.三方工具 jprofile ...
- Spark(一)—— 大数据处理入门
一.Spark介绍 Apache Spark is a fast and general-purpose cluster computing system. It provides high-leve ...
- C++中对封装的语法支持——静态成员
静态成员(变量与函数) 1.静态成员变量的语法.访问.特点(共享.类内声明类外初始化) 静态成员变量在class中只做声明,并没有初始化所以不会分配内存. (1) 非静态成员变量必须通过对象来访问. ...
- Kafka needs no Keeper(关于KIP-500的讨论)
写在前面的 最近看了Kafka Summit上的这个分享,觉得名字很霸气,标题直接沿用了.这个分享源于社区的KIP-500,大体的意思今后Apache Kafka不再需要ZooKeeper.整个分享大 ...
- opencv随笔1
图像处理技术一般包括图像压缩,增强和复原,匹配 描述和l识别 3 个部分. 图像处理一般指数字图像处理 ( Digitallmage Processing). 其中,数字图像是指用工业相机.摄像机.扫 ...
- HTML建立超链接
链接是HTML文档的最基本特征之一.超文本链接英文名为hyperlink,它能够让浏览器在各个独立的页面之间方便地跳转.超链接有外部链接.电子邮件链接.锚点链接等. a标签 网页中<a& ...
- RevitAPI 隐藏UI读取Revit文件
1.1. 新建一个控制台项目 1.2. 添加Revit API引用 我们找到revit安装目录下的这两个DLL添加到项目引用中 RevitNET.dll RevitAPI.dll 修改属性:复制本地: ...
- JavaScript中的基本数据类型和引用数据类型
ECMAScript变量包括了两种不同的数据类型 在学习JavaScript的数据类型时,我们通常会把数据类型分成六中(官方认为)Object.String.Boolean.Number.Undefi ...
- python_day05
今日内容 ''' post请求登录github Request URL: https://github.com/session Request Method: POST #Referer表示上一个请求 ...
- 理解Redis单线程运行模式
本文首发于:https://mp.weixin.qq.com/s/je4nqCIq6ARhSV2V5Ymmtg 微信公众号:后端技术指南针 0.概述 通过本文将了解到以下内容: Redis服务器采用单 ...