我正在尝试使用 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
