Question

地球以原始代码旋转：

＆＃13;

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

＆＃13;

但为什么下面的图像是静态的呢？并且悬停功能也不起作用。

＆＃13;

<style>
.earth {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
  	width: 677px;
	height: 677px;	
	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);
	animation-direction:normal;
	animation-name: rotate;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill:forwards;
}
@keyframes rotate {
	   0% {position: 0px 0px;}
  100% {position: 1024px 0px;}
	}
.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>

＆＃13;

我想画一个旋转的地球，在地图热点悬停时显示另一个图像。但是如果我在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 {
	 0% { left: 0%; }
	 100% { left: -100%; }
}
@keyframes slide2 {
	 0% { left: 100%; }
	 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即可将交替图像置于边界之间。

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

1 个答案: