地球为什么不能像图像一样旋转？

Question

地球旋转的原始代码：

<style> 
 
.earth { 
 
\t position:absolute; 
 
\t top:0; 
 
\t bottom:0; 
 
\t left:0; 
 
\t right:0; 
 
\t margin:auto; 
 
    width: 677px; 
 
\t height: 677px; 
 
\t background: url(http://pic.58pic.com/58pic/17/52/66/05S58PICEZC_1024.jpg); 
 
\t border-radius: 50%; 
 
\t background-size: cover; 
 
\t box-shadow: inset -30px -30px 60px 2px rgb(0, 0, 0), 
 
\t \t inset 0 0 20px 2px rgba(255, 255, 255, 0.2); 
 
\t animation-direction:normal; 
 
\t animation-name: rotate; 
 
\t animation-duration: 4s; 
 
\t animation-iteration-count: infinite; 
 
\t !--animation-timing-function: linear;--! 
 
\t animation-fill:forwards; 
 
} 
 
@keyframes rotate { 
 
\t 0% {background-position: 0 0;} 
 
    100% {background-position: 1024px 0;} 
 
\t } 
 
.earth:hover{ 
 
    -webkit-animation-play-state:paused; 
 
} 
 

 
.hover_img a { position:relative; } 
 
.hover_img a span { position:absolute; display:none; z-index:99; } 
 
.hover_img a:hover span { display:block; } 
 

 

 
</style> 
 
<div class="earth"></div>

但为什么它是静态的，如下的图像？ 而悬停功能也不起作用。

<style> 
 
.earth { 
 
\t position:absolute; 
 
\t top:0; 
 
\t bottom:0; 
 
\t left:0; 
 
\t right:0; 
 
\t margin:auto; 
 
    \t width: 677px; 
 
\t height: 677px; \t 
 
\t border-radius: 50%; 
 
\t box-shadow: inset -30px -30px 60px 2px rgb(0, 0, 0), 
 
\t \t inset 0 0 20px 2px rgba(255, 255, 255, 0.2); 
 
\t animation-direction:normal; 
 
\t animation-name: rotate; 
 
\t animation-duration: 4s; 
 
\t animation-iteration-count: infinite; 
 
\t animation-timing-function: linear; 
 
\t animation-fill:forwards; 
 
} 
 
@keyframes rotate { 
 
\t 0% {position: 0px 0px;} 
 
    100% {position: 1024px 0px;} 
 
\t } 
 
.earth:hover{ 
 
    -webkit-animation-play-state:paused; 
 
} 
 

 
.hover_img a { position:relative; } 
 
.hover_img a span { position:absolute; display:none; z-index:99; } 
 
.hover_img a:hover span { display:block; } 
 

 

 
</style> 
 
<div> 
 
<img src="http://pic.58pic.com/58pic/17/52/66/05S58PICEZC_1024.jpg" usemap="#map" class="earth"/> 
 
<map name="map"> 
 
    <area shape="poly" coords="224,330,239,325" href="images/diru.png" alt="" class="hover_img"> 
 
</map> 
 
</div>

我想画一个旋转的地球与显示在悬停在地图热点另一幅图像。但是，如果我在CSS中使用背景图像，我发现代码工作正常，如果只是将图像放入页面，则代码会失败。如果悬停功能失败，则需要单击地图热点才能显示新图像。当点击新图像屏幕上的任何地方时，我需要一个功能返回到地球图像。请帮忙！

Answer 1

第一个例子中背景围绕容器转动的秘密在于它的顶部位置与其大小不成比例，因为最后一个设置为“覆盖”整个空间，这意味着背景图像应始终覆盖容器的空间，无论它从何处开始。

作为一个图像子标签，它与其他选项截然不同，它只是一个有用的解决方案，可以将两个img的标签滑过容器，给人一种旋转的印象。

.earth { 
 
    position: absolute; 
 
    top: 10%; 
 
    left: 0%; 
 
    width: 1000px; 
 
    height: 500px; 
 
    margin:0px 0 0 0px; 
 
    animation: slide 1s infinite; 
 
    -webkit-animation: slide 5s infinite; 
 
    -webkit-animation-delay: 1s; 
 
    
 
} 
 
.earth2 { 
 
    position: absolute; 
 
    top: 10%; 
 
    left: 100%; 
 
    width: 1000px; 
 
    height: 500px; 
 
    margin:0px 0 0 0px; 
 
    animation: slide2 1s infinite; 
 
    -webkit-animation: slide2 5s infinite; 
 
    -webkit-animation-delay: 1s; 
 
    
 
} 
 

 

 
@keyframes slide { 
 
\t 0% { left: 0%; } 
 
\t 100% { left: -100%; } 
 
} 
 
@keyframes slide2 { 
 
\t 0% { left: 100%; } 
 
\t 100% { left: 0%; } 
 
} 
 

 
#container:hover > [class^="earth"] { 
 
animation-play-state: paused; 
 
} 
 

 
#container { 
 
position: relative; 
 
border-radius: 50%; 
 
box-shadow: inset -30px -30px 60px 2px rgb(0, 0, 0),inset 0 0 20px 2px 
 
rgba(255, 255, 255, 0.2); 
 
height:560px; 
 
width: 1000px; 
 
overflow:auto; 
 
}

<div id="container"> 
 
<img class="earth" src="http://pic.58pic.com/58pic/17/52/66/05S58PICEZC_1024.jpg" usemap="#map" /> 
 
<img class="earth2" src="http://pic.58pic.com/58pic/17/52/66/05S58PICEZC_1024.jpg" usemap="#map" /> 
 
<div/>

对于你只需要设置overflow:auto和position:relative保持边界之间滞留交替图像容器风格。