Question

我正在使用背景旋转地球仪。但它在一些轮换后停止/抽搐。我不知道我在哪里弄错了，以及为什么在经过一些轮换后它会抽搐。

这是带小提琴的代码

HTML

  <div id="earth">
  </div>

CSS

body {
background-color: black;
}

#earth {
width: 143px;
height: 143px;
background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg);border-radius: 50%;
background-size: 320px;
box-shadow: inset 1px 0 27px 1px rgb(5, 5, 5), inset -3px 0 5px 2px rgba(255, 255, 255, 0.2);
-webkit-animation-name: rotate;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: rotate;
-ms-animation-duration: 4s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
z-index: 9999;
position: relative;
margin-left: 52px;

}

@-webkit-keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 210px; }
}


@-ms-keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 210px; }
}

@-moz-keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 210px; }
}


@keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 210px; }
}

小提琴：http://jsfiddle.net/k54QN/

Answer 1

您的“to”background-position应该等于图片的宽度。

Answer 2

将此添加到#earth

transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);

它将使用GPU进行硬件加速。

Answer 3

@-webkit-keyframes rotate {
  from { background-position-x: 0px; }
  to { background-position-x: 590px; }
}


@-ms-keyframes rotate {
  from { background-position-x: 0px; }
  to { background-position-x: 590px; }
}

@-moz-keyframes rotate {
  from { background-position-x: 0px; }
  to { background-position-x: 590px; }
}


@keyframes rotate {
  from { background-position-x: 0px; }
  to { background-position-x: 590px; }
}

尝试从“TO”更改background-position-x，可能有问题的一点是它会旋转得更快，但是你只需要延长动画时间。

Answer 4

为43px globe编辑：

匹配background-size，如下所示：

#earth {
width: 43px;
height: 43px;
background-size: 86px, 43px;  //Height should match height of globe (unless you don't want to see the poles) and width should be 2x height

@-webkit-keyframes rotate {
  from { background-position: 0px 0px; }
  to { background-position: 86px 0px; } //Match Width
}


@-ms-keyframes rotate {
  from { background-position: 0px 0px; }
  to { background-position: 86px 0px; } //Match Width
}

@-moz-keyframes rotate {
  from { background-position: 0px 0px; }
  to { background-position: 86px 0px; } //Match Width
}


@keyframes rotate {
  from { background-position: 0px 0px; }
  to { background-position: 86px 0px; } //Match Width
}

工作小提琴：

http://jsfiddle.net/k54QN/18/

Answer 5

将背景位置更改为图像的宽度，不要使用background-position-x。大多数浏览器都不支持它。

 body {
      background-color: black;
    }

    #earth {
     width: 243px;
    height: 243px;
        background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg);border-radius: 50%;
    background-size: 620px;
    box-shadow: inset 1px 0 27px 1px rgb(5, 5, 5), inset -3px 0 5px 2px rgba(255, 255, 255, 0.2);
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotate;
    -moz-animation-duration: 4s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: rotate;
    -ms-animation-duration: 4s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    animation-name: rotate;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    z-index: 9999;
    position: relative;
    margin-left: 52px;

    }

    @-webkit-keyframes rotate {
      from { background-position: 0px 0px; }
      to { background-position: 620px 0px; }
    }


    @-ms-keyframes rotate {
      from { background-position: 0px 0px; }
      to { background-position: 620px 0px; }
    }

    @-moz-keyframes rotate {
      from { background-position: 0px 0px; }
      to { background-position: 620px 0px; }
    }


    @keyframes rotate {
      from { background-position: 0px 0px; }
      to { background-position: 620px 0px; }
    }

Css3动画旋转

5 个答案: