我正在尝试使用 HTML 和 CSS 在每张图片显示 10 秒后交叉淡入淡出两张图片。我希望它不断重复。
这是我的 HTML:
<div id="container">
<img class="bottom" src="1.png">
<img class="top" src="2.png">
</div>
CSS:
#container {
float: right;
height: 246px;
position:relative;
width: 230px;
}
#container img {
height: 246px;
width: 230px;
left:0;
opacity: 0;
position:absolute;
}
#container img.bottom {
opacity: 1;
}
#container img.top {
animation-duration: 0.1s;
animation-name: crossFade;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes crossFade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
我以前从未使用过 CSS 动画,所以我有点困惑。仅显示“底部”图像,没有其他任何反应。
出了什么问题?
最佳答案
这是一个延迟 10s
和动画持续时间 1s
的示例。
#container {
float: right;
height: 246px;
position: relative;
width: 230px;
}
#container img {
height: 246px;
width: 230px;
left: 0;
opacity: 0;
position: absolute;
}
#container img.bottom {
opacity: 1;
}
#container img.top {
-webkit-animation: crossFade 11s infinite;
animation: crossFade 11s infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
@-webkit-keyframes crossFade {
0% {
opacity: 0;
}
47.62% {
opacity: 0;
}
52.38% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes crossFade {
0% {
opacity: 0;
}
47.62% {
opacity: 0;
}
52.38% {
opacity: 1;
}
100% {
opacity: 1;
}
}
<div id="container">
<img class="bottom" src="https://dummyimage.com/200x200/404/fff">
<img class="top" src="https://dummyimage.com/200x200/101/fff">
</div>
关于html - 显示 10 秒后反复淡入淡出两个图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26958942/