纯CSS控制图片渐入渐出特效,鼠标滑过切换图片效果

2018-01-11 建站知识 浏览 手机预览
文章来源:http://www.imtr.cn/html/n180.html

我们先来看看效果,鼠标放在下面的图片上试试吧。


HTML代码

<img class="img" src="图片1"/>
<img src="图片2"/>

CSS代码

<style>
  .img {
    position:absolute;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
.img:hover, .img_hover {
    opacity:0;
    filter: alpha(opacity=0);
}
</style>


原文地址:http://www.imtr.cn/html/n180.html
  • 如果你的问题还没有解决,可以点击页面右侧的“ ”,站长收到问题后会尽快回复解决方案到你的邮箱。
  • 创造始于问题,有了问题才会思考,有了思考,才有解决问题的方法,才有找到独立思路的可能。 —— 陶行知