Question

我搜索过谷歌，直到我脸红了。我尝试了各种代码并且非常不成功。我知道必须有一种方法让图像在相同的位置以随机顺序出现/消失到1个图像始终打开的位置。共有4张图片。我在HTML5中编码，这是编码的一个例子：

<body>
<div id="content">
   <figure id="suv">
        <img src="./cadillac_escalade.png" alt="SUV" style="float: right" width="210" height="155">         
   </figure>
   <figure id="car">
        <img src="./ICAR.png" alt="Car" style="float: left" width="220" height="135">
   </figure>
</body>

CSS：

figure
{
display: block;
}

和

.blink {
    animation-duration: 0.5s;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: steps(5, start);
}
@keyframes blink {
    80% {
       visibility: hidden;
    }
}

我已经尝试了http://jsfiddle.net/r6dje/ CSS代码，并在本网站上进行了一些修改。但是，我不需要它闪烁，只是出现/消失/重新出现。你可以告诉我我非常精通html，但由于某种原因，这个问题让我发疯了！如果有人能够对此有所了解并帮助我使这些代码正常工作，我将非常感激。提前谢谢！

Answer 1

看看http://malsup.com/jquery/cycle/begin.html。向下滚动并拍摄您喜欢的代码。

Answer 2

如果这些图像都作为CSS精灵存在于一个图像中，那么更改图像就像更改其背景位置坐标一样简单。这可以通过带有.css样式命令的javascript简单地完成。我在战术中提到这种变化，因为它更简单;有关此类方法的更多文档。如果你没有得到你想要的HTML5答案，也许精灵就是答案。

Answer 3

这只是一个小小的CSS动画示例，希望它可以帮助：）

@-webkit-keyframes myAnimation {
      0% {background-image: url(img1.jpg);opacity: 0;}
   8.33% {background-image: url(img1.jpg);opacity: 1;}
  16.66% {background-image: url(img1.jpg);opacity: 0;}

     25% {background-image: url(img2.jpg);opacity: 0;}
  33.32% {background-image: url(img2.jpg);opacity: 1;}
  41.65% {background-image: url(img2.jpg);opacity: 0;}

     50% {background-image: url(img3.jpg);opacity: 0;}
  58.31% {background-image: url(img3.jpg);opacity: 1;}
  66.64% {background-image: url(img3.jpg);opacity: 0;}

     75% {background-image: url(img4.jpg);opacity: 0;}
   83.3% {background-image: url(img4.jpg);opacity: 1;}
  91.63% {background-image: url(img4.jpg);opacity: 0;}
    100% {opacity: 0;}
}
.myDiv {
    width: 300px;
    height: 150px;
    background-size: 100% 100%;
    -webkit-animation: myAnimation 5s linear infinite;
    -moz-animation: myAnimation 5s linear infinite;
    -o-animation: myAnimation 5s linear infinite;
}

等...

@-moz-keyframes myAnimation {
    0% { }
   50% { }
  100% { }
}
@-o-keyframes myAnimation {
    0% { }
   50% { }
  100% { }
}

如何在没有事件或按钮的情况下使图像显示和消失

3 个答案: