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>

 

posted @ 2017-12-25 14:15  dongxiaolei  阅读(344)  评论(0)    收藏  举报