【问题标题】:Fading photos in slideshow using CSS使用 CSS 在幻灯片中淡化照片
【发布时间】:2012-05-27 10:41:48
【问题描述】:

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

【问题讨论】:

标签: javascript css animation slideshow fading


【解决方案1】:
.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/

【讨论】:

  • 但我希望它在删除之前褪色,而不是在写入时,所以我可以在使用 javascript 删除之前编辑照片样式吗?
  • @guyzyl - 如果符合您的预期,请查看演示。
  • 你在 IE 中测试过这个吗?似乎不适用于 7、8 或 9
  • 你能帮我在我的网站 (guyzyl.org) 中实现这个吗?
  • @guyzyl - 我推荐你使用 jQuery,因为它易于使用,最重要的是 - 支持跨浏览器。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-07-07
  • 1970-01-01
  • 2023-03-28
  • 2017-12-26
相关资源
最近更新 更多