css实现星光闪耀动画效果

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

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

步骤一、制作星星

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

步骤二、添加动画

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

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

最终再加上流星划过动画

@-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);
    }
}

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