我已经搜索过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% { }
}