Question

我有一个img in html

我想在css代码中以4秒的时间间隔显示3个不同的img。

PD：我发现了这个例子，但我并不理解。 http://css3.bradshawenterprises.com/cfimg/#cfimg3

Answer 1

这里只使用CSS。

<强> HTML ：

<div id="img></div>

<强> CSS ：

#img {
    width:600px;
    height:400px;
    border:1px solid #000;
    -webkit-animation:changeBG 12s ease infinite;
    -ms-animation:changeBG 12s ease infinite;
    -moz-animation:changeBG 12s ease infinite;
    -o-animation:changeBG 12s ease infinite;
}
@-webkit-keyframes changeBG {
    0% { background:url('http://dummyimage.com/600x400/f20808/fff'); }
    50% { background:url('http://dummyimage.com/600x400/ffffff/000'); }
    100% { background:url('http://dummyimage.com/600x400/000000/fff'); }
}
@-moz-keyframes changeBG {
    0% { background:url('http://dummyimage.com/600x400/f20808/fff'); }
    50% { background:url('http://dummyimage.com/600x400/ffffff/000'); }
    100% { background:url('http://dummyimage.com/600x400/000000/fff'); }
}
@-ms-keyframes changeBG {
    0% { background:url('http://dummyimage.com/600x400/f20808/fff'); }
    50% { background:url('http://dummyimage.com/600x400/ffffff/000'); }
    100% { background:url('http://dummyimage.com/600x400/000000/fff'); }
}
@-o-keyframes changeBG {
    0% { background:url('http://dummyimage.com/600x400/f20808/fff'); }
    50% { background:url('http://dummyimage.com/600x400/ffffff/000'); }
    100% { background:url('http://dummyimage.com/600x400/000000/fff'); }
}

这是 FIDDLE

如何css过渡不同的img

1 个答案: