使用CSS在幻灯片中淡化照片

时间:2012-05-20 19:49:48

标签: javascript css animation slideshow fading

我有一个网站,主页上有图片幻灯片。在删除照片之前,我会在其后面写下一张照片,然后将其删除。我想知道在删除照片之前如何添加淡化效果。我的网站是:guyzyl.org,所以你可以看看我在说什么。另外我不知道如何使用Jquery,所以请不要提供该解决方案。谢谢你的帮助。盖伊。

1 个答案:

答案 0 :(得分:4)

.photo{
    -webkit-transition: opacity .5s ease-in-out;  /*Webkit*/
    -moz-transition: opacity .5s ease-in-out;  /*Firefox*/
    -o-transition: opacity .5s ease-in-out;  /*Opera*/
    transition: opacity .5s ease-in-out;  /*CSS3 Standard*/
    opacity: 1;
}
.photo.fade{
    opacity: 0;
}

document.querySelector(".photo").classList.add("fade");

请参阅演示:http://jsfiddle.net/DerekL/jzLZZ/