*{
    margin: 0;
    padding: 0;
}
body{
    background: url(/images/bg.jpg);
    background-color: #000;

}
img{
    width: 100%;
    
}
.starwars-demo{
    height: 17em;
    position: absolute;
    left: 50%;
    top: 53%;
    width: 17em;
    /* background-color: red; */
    transform: translate(-50%,-50%);
    /* 眼睛跟屏幕距离 */
    perspective: 800px;
    transform-style: preserve-3d;

}
.star,.wars,.byline{
    position: absolute;
}
.star{
    top: -0.75em;
    animation: star 10s ease-out infinite;
    
}
.wars{
    bottom: -0.5em;
    animation:wars 10s ease-out infinite;
}
@keyframes star{
    0%{
        opacity: 0;
        transform: scale(1.5);
    }
    20%{
        opacity: 1;

    }
    89%{
        opacity: 1;
        transform: scale(1);

    }
    100%{
        opacity: 0;
        /* 1em=16px */
        transform: translateZ(-400em);
    }
}
@keyframes wars{

    0%{
        opacity: 0;
        transform: scale(1.5) tranlateY(0.5em);
    }
    20%{
        opacity: 1;
    }
    90%{
        opacity: 1;
        transform: scale(1);
    }
    100%{
        opacity: 0;
        transform: translateZ(-400em);
    }

}