css实现星光闪耀动画效果

废话不多说，先上效果图：

Aug-01-2019 15-09-08.gif

步骤一、制作星星

观察星星的四角，可以用两个div实现，然后背景颜色使用渐变就可以实现，然后定位到流星尾巴末端，
流星的尾巴原理同星星一样，使用背景渐变。
代码如下：

<div class="meteor">
        <div class="star"></div>
    </div>
<style>
.meteor {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transform: rotateZ(45deg);
    transform: -webkit-rotateZ(45deg);
}
.star {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 2px;
    background: linear-gradient(45deg,rgba(255,255,255,0),#729ff1);
    background: -webkit-linear-gradient(45deg,rgba(255,255,255,0),#729ff1);
    /*此处为下一步的添加动画*/
    /*-webkit-animation: tail 3s ease-in-out infinite,shooting 3s ease-in-out infinite;
    -o-animation: tail 3s ease-in-out infinite,shooting 3s ease-in-out infinite;
    animation: tail 3s ease-in-out infinite,shooting 3s ease-in-out infinite;*/
}
.star::before,
.star::after{
    content: "";
    position: absolute;
    top: calc(100% - 1px);
    left: 100%;
    height: 2px;
    background: linear-gradient(45deg,rgba(255,255,255,0),#729ff1,rgba(255,255,255,0));
    background: -webkit-linear-gradient(45deg,rgba(255,255,255,0),#729ff1,rgba(255,255,255,0));
    /*此处为下一步的添加动画*/
    /*-webkit-animation: shining 3s ease-in-out infinite;
    -o-animation: shining 3s ease-in-out infinite;
    animation: shining 3s ease-in-out infinite;*/
}
.star:before {
    transform: translateX(-50%) rotateZ(-45deg);
    transform: -webkit-translateX(-50%) -webkit-rotateZ(-45deg);
}
.star:after {
    transform: translateX(-50%) rotateZ(45deg);
    transform: -webkit-translateX(-50%) -webkit-rotateZ(45deg);
}
</style>

步骤二、添加动画

星星的闪耀动画过程为由小变大再变小

流星尾的动画也是由小变大再变大

最终再加上流星划过动画

@-webkit-keyframes shining {
    0% {width: 0;}
    50% {width: 30px;}
    100% {width: 0;}
}
@keyframes shining {
    0% {width: 0;}
    50% {width: 30px;}
    100% {width: 0;}
}
@-webkit-keyframes tail {
    0% {width: 0;}
    30% {width: 100px;}
    100% {width: 0;}
}
@keyframes tail {
    0% {width: 0;}
    30% {width: 100px;}
    100% {width: 0;}
}
@-webkit-keyframes shooting {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(300px);
        transform: translateX(300px);
    }
}
@keyframes shooting {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(300px);
        transform: translateX(300px);
    }
}

想要实现流星漫天飞的效果，在以上代码的基础上，使用动画延迟，多复制一些以上结果即可实现。