<!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>
