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 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...
随机推荐
- [译]用R语言做挖掘数据《一》
介绍 一.实验说明 1. 环境登录 无需密码自动登录,系统用户名shiyanlou,密码shiyanlou 2. 环境介绍 本实验环境采用带桌面的Ubuntu Linux环境,实验中会用到程序: 1. ...
- 事件绑定的快捷方式 利on进行事件绑定的几种情况
[事件绑定快捷方式]$("button:first").click(function(){ alert(1); }); [使用on绑定事件] ① 使用on进行单事件绑定 $(&qu ...
- SQL 之获取DATE类的年月日语句
Select CONVERT(varchar(100), GETDATE(), 0): 05 16 2006 10:57AM Select CONVERT(varchar(100), GETDATE( ...
- nodejs记录1——async函数
其实手动配置babel环境并不难,记录下步骤: 1.首先npm init创建一个nodejs项目 2.全局安装babel-cli处理工具:npm i babel-cli -g 3.cd到项目下安装ba ...
- 十六、Condition等待通知
一.简介 我们可以使用syncronized和wait,notify实现等待通知.而syncronized的高级实现Lock,也可以实现等待通知,需要构造Condition的实例对象. JDK文档:h ...
- 使用gunzip、tar、rar、（zip压缩和unzip解压缩）
---------------------20171119------------------------------ 解压gz后缀 使用gunzip filename.gz ------------ ...
- 01 使用JavaScript原生控制div属性
写在前面: 因对前端开发感兴趣,于是自学前端技术,现在已经会HTML.CSS.JavaScript基础技术.但水平处于小白阶段,在网上找一些小项目练练手,促进自己的技术成长.文章记录自己的所思所想,以 ...
- layui——上传图片，并实现放大预览
一般上传文件后会返回文件的路径,然后存储到数据库,那么首先实现上传后的放大和删除功能 function uploadSmallPic() { var upload = layui.upload; up ...
- Spring MVC No converter found for return value of type 解决方法
1.在pom中添加 jackson <properties> <jackson.version>2.8.5</jackson.version> </prope ...
- 学习Golang的步骤建议
一.快速入门 通过快速入门可以宏观的了解Go相关知识.快速入门可以去学习 go-tour 国内可以访问的中文版的 go-tour 地址有下面一些: http://gotour.qizhanming.c ...