css3 圣诞红包雨效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>css3 圣诞红包雨效果</title>
<style>
* {
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.cc{
width: 100%;
height: 500px;
overflow: hidden;
}
.outer{
position: relative;
width: 200px;
height: 600px;
animation:move 6s forwards;
/* transition:all .2s;*/
}
@keyframes move{
0%{
transform: translateX(0);
}
50%{
transform: translateX(600px);
}
100%{
transform: translateX(1200px);
}
}
.festival_fly {
visibility: hidden;
position: absolute;
left:0;
top:0;
z-index: 400;
width: 200px;
height: 48px;
background: url(images/sd01.png) no-repeat left top;
animation: flyMove 1s steps(9) infinite;
}
.festival_fly .link {
display: block;
height: 100%;
width: 100%;
}
.festival_fly .close {
position: absolute;
top: -5px;
right: -5px;
}
.couten {
position: absolute;
top: 0;
left:0;
z-index: 20;
}
.couten li {
position: absolute;
width: 67px;
height: 100px;
background: url(images/sd02.png);
opacity: 0;
transform: scale(0.3);
animation-duration: 6s;
animation-iteration-count: 1;
cursor: pointer;
} .couten li.rain.stop {
animation-iteration-count: 0;
} .couten li.rain {
animation-name: falling;
}
@keyframes flyMove{
0% {
background-position: 0 0;
}
100% {
background-position: 0 -432px;
}
}
@keyframes falling {
0% {
transform: translate3d(0, 0, 0) rotate(0deg) scale(0.3);
opacity: 1;
}
70% {
opacity: 1;
}
100% {
transform: translate3d(-100px, 935px, 0) rotate(50deg) scale(1);
opacity: 0;
}
} </style>
</head>
<body>
<div class="cc">
<div class="outer">
<div class="festival_fly flyIn flySide" id="festival_fly" style="visibility: visible;">
<a class="link" class="close">
<img src="https://p.ssl.qhimg.com/d/inn/89e080e6/close.png">
</a>
</div>
<ul class="couten">
<li class="li rain stop" style="animation-delay: 0s; animation-play-state: paused;"></li>
<li class="li rain stop" style="animation-delay: 0.3s; animation-play-state: paused;"></li>
<li class="li rain" style="animation-delay: 0.6s;"></li>
<li class="li rain" style="animation-delay: 0.9s;"></li>
<li class="li rain" style="animation-delay: 1.2s;"></li>
<li class="li rain" style="animation-delay: 1.5s;"></li>
<li class="li rain" style="animation-delay: 1.8s;"></li>
<li class="li rain" style="animation-delay: 2.1s;"></li>
<li class="li rain" style="animation-delay: 2.4s;"></li>
<li class="li rain" style="animation-delay: 2.7s;"></li>
<li class="li rain" style="animation-delay: 3s;"></li>
<li class="li rain" style="animation-delay: 3.3s;"></li>
<li class="li rain" style="animation-delay: 3.6s;"></li>
<li class="li rain" style="animation-delay: 3.9s;"></li>
<li class="li rain" style="animation-delay: 4.2s;"></li>
<li class="li rain" style="animation-delay: 4.5s;"></li>
<li class="li rain" style="animation-delay: 4.8s;"></li>
<li class="li rain" style="animation-delay: 5.1s;"></li>
<li class="li rain" style="animation-delay: 5.4s;"></li>
<li class="li rain" style="animation-delay: 5.7s;"></li>
</ul>
</div>
</div>
</body>
</html>
css3 圣诞红包雨效果的更多相关文章
- 用css动画写一个下红包雨的效果
红包雨的功能相信大家都做过,不过一般都是用js计算的,闲着无聊用css的样式写了类似的,主要用的是css的transform和animation结合.大概代码逻辑: @keyframes startH ...
- 2017了，回家前 "年末" 分享:下雨，飘雪，红包雨，碰撞球，自定义View
(本博客为原创:http://www.cnblogs.com/linguanh/) 目录: 效果展示 感想 代码拆解 开源地址 效果展示 有没有兴趣继续看下去,直接看下"颜值"是第 ...
- 仿淘宝,京东红包雨(基于Phaser框架)
本红包雨项目是基于HTML5的游戏框架Phaser写的,最终形成的是一个canvas,所以性能很好,但是必须要说的是这个框架比较大,压缩后也有700K左右,所以请慎用. 代码地址: https://g ...
- 红包雨中：Redis 和 Lua 的邂逅
2018年,王思聪的冲顶大会,西瓜视频的百万英雄,再到映客的芝士超人,直播答题火爆全网. 我服务的一家电商公司也加入了这次热潮,技术团队研发了直播答题功能.答题结束之后,红包会以红包雨的形式落下,用户 ...
- css3图片模糊过滤效果
css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...
- 基于css3的轮播效果
花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...
- 24个 HTML5 & CSS3 下拉菜单效果及制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- 学习使用 jQuery & CSS3 制作照片堆栈效果
在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...
- 3D Grid Effect – 使用 CSS3 制作网格动画效果
今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...
随机推荐
- 相片Exif协议
今天看他们安卓在做项目遇到一个要让旋转拍摄的相片竖屏方向显示 ,网上搜了下找到了安卓的一个博客,看了下想着既然安卓有ios也应该会有,果然不出所料,确实是有.其实他们都是遵循Exif协议,百度百科也有 ...
- 泛型委托Func<T>
Func<T>——委托只有泛型版本的,接受参数个数可以是若干个,也可以没有,但是必须是有返回值的方法. Func<TResult>——这个表示没有参数,只有返回值TResult ...
- ubuntu16.04 安装 nginx 服务器
在线安装 apt-get install nginx 说明 启动程序文件在/usr/sbin/nginx 日志放在了/var/log/nginx中,分别是access.log和error.log 并已 ...
- 使用命令行编译打包运行自己的MapReduce程序 Hadoop2.6.0
使用命令行编译打包运行自己的MapReduce程序 Hadoop2.6.0 网上的 MapReduce WordCount 教程对于如何编译 WordCount.java 几乎是一笔带过… 而有写到的 ...
- For循环中由于ajax异步导致的问题解决（增加alert数据正常，去掉alert之后数据错误）
由于ajax异步请求的机制,for循环运行不会等内部ajax请求结束,而直接循环到最后.解决方法:将for循环里面的请求单独封装一个方法. 个人遇到的问题具体如下 下面这段代码,如果第5行studat ...
- bzoj1201: [HNOI2005]数三角形----递推+bitset
-by bzoj http://www.lydsy.com/JudgeOnline/problem.php?id=1201 枚举所有交点,统计每个以每个点为顶点的正三角和和以每个点为左端点的反三角 ...
- bootStrap下拉菜单 点击下拉列表某个元素，列表不隐藏
html: <a class="dropdown-toggle bgImg-priceWran " id="dropdownMenu1" data-tog ...
- Storage 的使用
//是否不支持storage isNoStorage: function(){ if(typeof(Storage)=="function" || window.sessionSt ...
- 在ES6中如何优雅的使用Arguments和Parameters
原文地址:how-to-use-arguments-and-parameters-in-ecmascript-6 ES6是最新版本的ECMAScript标准,而且显著的改善了JS里的参数处理.我们 ...
- js 基于可视区域 创建展示区域对应的经纬度二维数组
本篇文章主要是分享下基于地图区域创建经纬度二维数组,需要的朋友可以过来参考下 接上个文章, 基于 地图区域,算出这个展示区域对应的点. 经纬度的变化关系: XY页面展示上, 从左到右维度是增加 如: ...