css3 星星闪烁-css实现星光动画效果

废话不多说css3 星星闪烁，先上疗效图：

2019 年 8 月 1 日 15-09-08.gif

步骤 1. 制作一颗星

观察星星的四个角可以用两个div来实现，然后背景色可以用渐变来实现，然后定位在流星尾部的末端，

流星尾部的工作方式与恒星相同，使用背景渐变。

代码如下所示：

        

    

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

步骤2.添加动画星星的闪亮动画。 动画的过程是从小到大再小。 流星尾巴的动画也是从小到大再大css3 星星闪烁，最后加上流星飞过的动画。

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

要实现流星满天飞的疗效，在上面代码的基础上，用动画来延迟，多复制上面的效果来实现。