我已经搜索过Google,直到脸色发青。我尝试了各种代码,但都非常失败。我知道必须有一种方法可以使图像在始终显示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,但是由于某种原因,这个问题使我发疯!如果有人能对此有所启发并帮助我使此代码正常工作,我将不胜感激。先感谢您!

最佳答案

这只是一个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% { }
}



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

07-24 09:50
查看更多