CSS旋转地球仪


75

我正在CSS中创建旋转的地球效果。我在CSS中创建了Globe:

body {
  background-color: #111;
}

#earth {
    width: 300px;
    height: 300px;
    background: url(https://web.archive.org/web/20150807125159if_/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>

但是它停止,然后图像重置并再次开始。我希望它平稳移动而不会抽动。非常感谢你!


2
这是一个很好的效果,但是我对此要保持谨慎。Chrome 39.0.2171.95 m(当然,即使有修复)也相当不稳定,并且会在CPU上产生明显的负载。
蒂姆·梅多拉

2
@TimMedora我不知道为什么,但是它在Firefox 34上运行非常平稳。在GC上。它适用于较小尺寸的图像或硬件加速(硬件加速会显着增加内存使用)。请在此处查看具有较小图像的地球仪:link
The Pragmatick 2015年

1
@TimMedora我使用的是Chrome版本,而且运行起来非常流畅。
AStopher

1
效果不错!在我的旧硬件/软件上运行得很好(PuppyLinux 5.2.8上的Chromium27,它是基于Ubuntu 10.04的全内存发行版)
DocSalvager 2015年

1
我以前从未见过这种效果-太棒了!恭喜您
布莱克·弗雷德里克

Answers:


91

background-position: 500px 0px;与610px取代500像素,这是background-size

body {
  background-color: #111;
}
#earth {
  width: 300px;
  height: 300px;
  background: url(https://web.archive.org/web/20150807125159if_/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>


5
否决,这是一个简单的问题,它错过了一个职位信息,如果您否决了,请说出原因,以便答题者可以改善答案。
毛罗(Mauro)2015年

2
我并不是说只是一个评论家,但是,地球不应该一直在向同一方向旋转吗?在这个答案中,旋转停止并向后开始,然后停止并重新向前
chiapa 2015年

啊,现在好多了:)
chiapa 2015年

感谢您指出。我正在复制粘贴浏览器特定的代码,然后错误地复制了该代码。在GC中,它也较早就可以正常工作,因此我看不到问题所在。谢谢。ChiapaKaiido
Pragmatick

46

您的代码中的问题是图像大小(610px)和动画的偏移量(500px)不同,并且在重置动画时它跳了(110px)。

我喜欢使用一个简单的技巧来代替以像素为单位定义动画偏移:以百分比定义
我没有告诉它移动610像素,而是告诉它移动100%

100%方法的好处是,如果您可以放大图片,则不必更改CSS中的所有硬编码值,IMO应该是首选方法。

请注意:从0%移到-100%似乎会产生跳数。因为我们需要朝正确的方向旋转,所以我尝试从100%开始并将其移动到0,但是此时图像不再存在。

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

这是代码段,但是100%而不是pixelvalue:
*请注意:动画仍在跳,但由于图像已不存在,所以我无法测试新代码。逻辑有效,但此实现似乎无效。以下代码仅是带有TS代码的演示。


4
实际上,这就是要完成的方式。(+1)
The Pragmatick

11
在我的浏览器(Safari)上,这一直从中国跳到墨西哥。
200_success,2015年

2
我也从中国跳到墨西哥。RHEL 6上的FF 31.2.0
Holloway,

4
嘿,它甚至无法在FF 34.0.5(Windows 8)上运行!您的解决方案仅适用于GC。

6
对我来说,嵌入式和整版都在跳跃。但是我为什么要在Firefox上运行呢?这很奇怪
The Pragmatick'1
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.