css3实现流星雨特效

用到css3知识:     radial-gradient 径向渐变，   filter， transform， animation以及  nth-child选择器等

 

html代码：

    <div class="container">
           <div class="meteor"></div>
           <div class="meteor"></div>
           <div class="meteor"></div>
           <div class="meteor"></div> 
           <div class="meteor"></div>
           <div class="meteor"></div>
           <div class="meteor"></div>
           <div class="meteor"></div>
           <div class="meteor"></div>
           <div class="meteor"></div>
           <div class="meteor"></div>
           <div class="meteor"></div>
           <div class="meteor"></div> 
           <div class="meteor"></div>
           <div class="meteor"></div>
           <div class="meteor"></div>
           <div class="meteor"></div>
         
     </div>

css3代码：

*{
    margin: 0;
    padding: 0;
}
body{
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    height: 100vh;        /* == height: 100%  */
    overflow: hidden;
    font-family: 'Times New Roman', Times, serif;
    justify-content: center;
    align-items: center;
}

.container{
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(45deg);
            transform: rotateZ(45deg);
    -webkit-animation: sky 200000ms linear infinite;
            animation: sky 200000ms linear infinite;
}

.meteor{
    position: absolute;
    left: 50%;
    top: 50%;
    height: 2px;
    background: