地球在原始代码中旋转:
<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>
但是为什么它像下面的图像一样静态?悬停功能也无法正常工作。
<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>
我想画一个旋转的地球,并在悬停地图热点处显示另一个图像。但是我发现,如果我在CSS中使用后台图像,则这些代码可以正常工作,如果仅将图像放入页面中,则该代码会失败。并且悬停功能失败,它需要单击地图热点以显示新图像。当单击新图像屏幕中的任何位置时,我需要一个功能才能返回地球图像。请帮助!
背后的秘密是为什么背景在第一个示例中呈现容器,因为它在顶部的位置与其大小不成比例,因为最后一个设置为"覆盖"整个空隙,这意味着背景图像应始终覆盖容器的空间。
。作为图像孩子标签,没有其他选择,它是一个有用的解决方案,可以将两个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
才能将链条搁在边界之间的交替图像。