在CSS中旋转地球仪

我正在用CSS创build一个旋转的地球效应。 我已经在CSS中创build了地球：

body { background-color: #111; } #earth { width: 300px; height: 300px; background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg); border-radius: 50%; background-size: 610px; box-shadow: inset 8px 36px 80px 36px rgb(0, 0, 0), inset -6px 0 12px 4px rgba(255, 255, 255, 0.3); animation-name: rotate; animation-duration: 12s; animation-iteration-count: infinite; animation-timing-function: linear; -webkit-animation-name: rotate; -webkit-animation-duration: 12s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } @keyframes rotate { from { background-position: 0px 0px; } to { background-position: 500px 0px; } } @-webkit-keyframes rotate { from { background-position: 0px 0px; } to { background-position: 500px 0px; } } 

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

但它停止，然后图像重置，然后重新开始。 我希望它能够平稳地移动而不会发生抖动。 非常感谢你！

Answer 1

在background-position: 500px 0px; 将610pxreplace为500px，这是background-size

 body { background-color: #111; } #earth { width: 300px; height: 300px; background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg); border-radius: 50%; background-size: 610px; box-shadow: inset 8px 36px 80px 36px rgb(0, 0, 0), inset -6px 0 12px 4px rgba(255, 255, 255, 0.3); animation-name: rotate; animation-duration: 12s; animation-iteration-count: infinite; animation-timing-function: linear; -webkit-animation-name: rotate; -webkit-animation-duration: 12s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } @keyframes rotate { from { background-position: 0px 0px; } to { background-position: 610px 0px; } } @-webkit-keyframes rotate { from { background-position: 0px 0px; } to { background-position: 610px 0px; } } 

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

Answer 2

代码中的问题是，图像大小（ 610像素 ）和animation的偏移量（ 500像素 ）是不同的，并在animation重置时跳跃（110像素）。

我喜欢使用一个简单的技巧，而不是在像素中定义animation偏移量： 以百分比定义它 。
我不告诉它移动610px，而是告诉它移动100％ 。

100％方法的好处是，如果你制作图片，你不需要改变CSS中的所有硬编码值，而IMO应该是首选的方法。

请注意：从0到100％似乎创build一跳。 因为我们需要旋转到正确的方向，所以我尝试100％的开始，并将其移动到0，但在这一点上，图像不再存在。

 @keyframes rotate { from { background-position: 100% 0; } to { background-position: 0 0; } } 

---

这里是片段，但100％而不是像素值：
*请注意：animation仍然跳跃，但我不能testing新的代码，因为图像不再存在。 逻辑起作用，但是这个实现似乎不是。 以下代码只是TS代码的演示。

 body { background-color: #111; } #earth { width: 300px; height: 300px; background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg); border-radius: 50%; background-size: 610px; box-shadow: inset 8px 36px 80px 36px rgb(0, 0, 0), inset -6px 0 12px 4px rgba(255, 255, 255, 0.3); animation-name: rotate; animation-duration: 12s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes rotate { from { background-position: 100% 0; } to { background-position: 0 0; } } 

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