animation——流星雨动画效果

效果展示：

HTML:

<div class="banner">
    　　　　<div class="star1"></div>
       　　<div class="star2"></div>
       　　<div class="star3"></div>
           <div class="star4"></div>
           <div class="star5"></div>
           <div class="star6"></div>
</div>

CSS:

.banner {
            width: 100%;
            height: 520px;
            background: url(../../img/pageimg/banner.png) no-repeat center center;
        }

        .star1 {
            width: 1px;
            height: 70px;
            background: #fff;
            position: relative;
            left: 50px;
            top: -100px;
            animation: star1 5s Linear 0s infinite normal none;
        }

        @keyframes star2 {
            0% {
                top: -100px;
                opacity: 1;
            }

            50% {
                top: 520px;
                opacity: 0.1;
            }

            100% {
                top: 520px
            }
        }

        .star2 {
            width: 1px;
            height: 100px;
            background: #fff;
            position: relative;
            left: 200px;
            top: -100px;
            animation: star2 2s Linear 0s infinite normal none;
        }

        @keyframes star3 {
            0% {
                top: -100px;
                opacity: 1;
            }

            50% {
                top: 520px;
                opacity: 0.1;
            }

            100% {
                top: 520px
            }
        }

        .star3 {
            width: 1px;
            height: 30px;
            background: #fff;
            position: relative;
            left: 350px;
            top: -100px;
            animation: star3 7s Linear 0s infinite normal none;
        }

        @keyframes star4 {
            0% {
                top: -100px;
                opacity: 1;
            }

            50% {
                top: 520px;
                opacity: 0.1;
            }

            100% {
                top: 520px
            }
        }

        .star4 {
            width: 1px;
            height: 80px;
            background: #fff;
            position: relative;
            left: 500px;
            top: -100px;
            animation: star4 10s Linear 0s infinite normal none;
        }

        @keyframes star5 {
            0% {
                top: -100px;
                opacity: 1;
            }

            50% {
                top: 520px;
                opacity: 0.1;
            }

            100% {
                top: 520px
            }
        }

        .star5 {
            width: 1px;
            height: 150px;
            background: #fff;
            position: relative;
            left: 650px;
            top: -100px;
            animation: star5 5s Linear 0s infinite normal none;
        }

        @keyframes star6 {
            0% {
                top: -100px;
                opacity: 1;
            }

            50% {
                top: 520px;
                opacity: 0.1;
            }

            100% {
                top: 520px
            }
        }

        .star6 {
            width: 1px;
            height: 70px;
            background: #fff;
            position: relative;
            left: 800px;
            top: -100px;
            animation: star6 6s Linear 0s infinite normal none;
        }