CSS中的旋转地球

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>

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>

Css相关问答推荐

将CSS栅格行高设置为其余视口高度

如何在Safari中隐藏CSS的offset-path属性？CSS支持规则不按预期工作

2 列 UL，右列中的列表项数量为奇数？

如何在 VS Code 中获得 JavaFX CSS 属性的自动完成功能？

当前的 html 标签没有发生两列布局

网格在行方向上的大小不正确

react 样式的条件类名称设置

tailwind 类的别名？

页脚上方的图像分隔线使用 ：：before 伪元素

CSS中的旋转地球

元素上的子弹来自哪里？

CSS如何使元素淡入然后淡出？

如何将 bootstrap 列高设为 100% 行高？

如何强制显示垂直滚动条？

将未知大小的大图像居中在一个较小的 div 中，并隐藏溢出

调用转发到 JSP 的 Servlet 时，浏览器无法访问/查找相关资源，如 CSS、图像和链接

CSS 插入边框

名称-值对的语义和 struct

如何在 CSS 中给出背景图像路径？

仅使用 css 的换行符(如
)