1. 程式人生 > >14(高階)CSS動畫之:旋轉星球

14(高階)CSS動畫之:旋轉星球


方法:

#earth{
    width: 800px;
    height: 800px;
    clear: both;
    background:url("earth.png") center center no-repeat;
    background-color:#ffbb33 ;
    border-radius: 50%;
    position: relative;
}
#earth img{
    animation: spin 10s infinite linear;
    position: absolute;
    top: 0;
    left: calc(50%- 25px);
}@keyframes spin {
    from{
        transform: translate(50%,400px)
        rotate(0turn)
        translate(-50%,-400px)
        translate(50%,50%)
        rotate(1turn)
        translate(-50%,-50%)
    }
    to{
        transform: translate(50%,400px)
        rotate(1turn)
        translate(-50%,-400px)
        translate(50%,50%)
        rotate(0turn)
        translate(-50%,-50%)
    }
}