我有这个样本:
代码 HTML:
<div id="cf2" class="shadow">
<img class="bottom" src="http://assets.sport.ro/assets/protv/2014/12/31/image_galleries/40908/cele-mai-frumoase-peisaje-din-lume-locurile-pe-care-trebuie-sa-le-vizitezi_1_size19.jpg" />
<img class="top" src="http://assets.sport.ro/assets/protv/2014/12/31/image_galleries/40908/cele-mai-frumoase-peisaje-din-lume-locurile-pe-care-trebuie-sa-le-vizitezi.jpg" />
</div>
代码 CSS:
img{
width:300px;
}
@keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#cf3 img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
我想使用关键帧在它们之间交换图像。
我试图重现其中一个例子 here但有些东西不起作用。
你能告诉我我做错了什么吗? 提前致谢!
最佳答案
您在 css 中访问了错误的 id
img{
width:300px;
/* added this position to make images overlap */
position: absolute;
}
@keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
/* here your name of id was wrong */
#cf2 img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-direction: alternate;
}
<div id="cf2" class="shadow">
<img class="bottom" src="http://assets.sport.ro/assets/protv/2014/12/31/image_galleries/40908/cele-mai-frumoase-peisaje-din-lume-locurile-pe-care-trebuie-sa-le-vizitezi_1_size19.jpg" />
<img class="top" src="http://assets.sport.ro/assets/protv/2014/12/31/image_galleries/40908/cele-mai-frumoase-peisaje-din-lume-locurile-pe-care-trebuie-sa-le-vizitezi.jpg" />
</div>
关于html - 如何仅从 css 更改图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45960234/