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