<!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 圣诞红包雨效果的更多相关文章

  1. 用css动画写一个下红包雨的效果

    红包雨的功能相信大家都做过,不过一般都是用js计算的,闲着无聊用css的样式写了类似的,主要用的是css的transform和animation结合.大概代码逻辑: @keyframes startH ...

  2. 2017了,回家前 "年末" 分享:下雨,飘雪,红包雨,碰撞球,自定义View

    (本博客为原创:http://www.cnblogs.com/linguanh/) 目录: 效果展示 感想 代码拆解 开源地址 效果展示 有没有兴趣继续看下去,直接看下"颜值"是第 ...

  3. 仿淘宝,京东红包雨(基于Phaser框架)

    本红包雨项目是基于HTML5的游戏框架Phaser写的,最终形成的是一个canvas,所以性能很好,但是必须要说的是这个框架比较大,压缩后也有700K左右,所以请慎用. 代码地址: https://g ...

  4. 红包雨中:Redis 和 Lua 的邂逅

    2018年,王思聪的冲顶大会,西瓜视频的百万英雄,再到映客的芝士超人,直播答题火爆全网. 我服务的一家电商公司也加入了这次热潮,技术团队研发了直播答题功能.答题结束之后,红包会以红包雨的形式落下,用户 ...

  5. css3图片模糊过滤效果

    css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...

  6. 基于css3的轮播效果

    花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...

  7. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  8. 学习使用 jQuery & CSS3 制作照片堆栈效果

    在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...

  9. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

随机推荐

  1. Java泛型的逆变

    在上篇<Java泛型的协变>这篇文章中遗留以下问题——协变不能解决将子类型添加到父类型的泛型列表中.本篇将用逆变来解决这个问题. 实验准备 我们首先增加以下方法,见代码清单1所示. 代码清 ...

  2. AngularJs ng-repeat重复项异常解决方案

    ng-repeat="v in arr track by $index" <!DOCTYPE html> <html lang="en"> ...

  3. js判断向量叉点 并求出交点坐标

     代码如下可以直接运行,判断向量相交并求出交点坐标 <!DOCTYPE html> <html> <head> <meta http-equiv=" ...

  4. golang操作mysql数据库

    golang操作mysql数据库 代码: mysql的增.删.改.查 package main import ( "database/sql" "fmt" &q ...

  5. C# 请求Https

    /// <summary> /// Get请求 /// </summary> /// <param name="Url"></param& ...

  6. [C#]浅谈协变与逆变

    看过几篇说协变与逆变的博客,虽然都是正确无误的,但是感觉都没有说得清晰明了,没有切中要害.那么我也试着从我的理解角度来谈一谈协变与逆变吧. 什么是协变与逆变 MSDN的解释:https://msdn. ...

  7. java实现邮箱验证的功能

    在日常生活中,我们在一个网站中注册一个账户时,往往在提交个人信息后,网站还要我们通过手机或邮件来验证,邮件的话大概会是下面这个样子的: 用户通过点击链接从而完成注册,然后才能登录. 也许你会想,为什么 ...

  8. c# MVC模式学习笔记_数据验证

    改变显示字段名称 设计字段规范 1.引用 using System.ComponentModel; using System.ComponentModel.DataAnnotations; 2.Dis ...

  9. hdu 4193 Non-negative Partial Sums 单调队列。

    Non-negative Partial Sums Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/32768 K (Jav ...

  10. String拾遗

    简介: String作为日常最常用的类,还是有必要对其中的细节做一些了解的,这篇就结合源码来看看这个常用的类. 一. 总述 类图如下: 从图中可以看到String是实现了 java.io.Serial ...