﻿/* 流星样式 */
.meteor1 {
    position: absolute;
    animation: 3.5s myMeteor;
    /* animation-iteration-count: infinite; */
    opacity: 0;
    width:40px;
    height:25px;
    background: url(/Images/star1.png) no-repeat;
}
.meteor2 {
    position: absolute;
    animation: 3.5s myMeteor;
    /* animation-iteration-count: infinite; */
    opacity: 0;
    width: 32px;
    height: 18px;
    background: url(/Images/star2.png) no-repeat;
}
.meteor3 {
    position: absolute;
    animation: 3.5s myMeteor;
    /* animation-iteration-count: infinite; */
    opacity: 0;
    width: 30px;
    height: 36px;
    background: url(/Images/star3.png) no-repeat;
}
.meteor4 {
    position: absolute;
    animation: 3.5s myMeteor;
    /* animation-iteration-count: infinite; */
    opacity: 0;
    width: 30px;
    height: 36px;
    background: url(/Images/star4.png) no-repeat;
}

/* 流星动画 按百分比帧设定属性 */
@keyframes myMeteor {
    0% {
        opacity: 0;
        transform: translate(100%, -100%);
    }

    25% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, 50%);
    }
}
