css3图片透明切换效果 |ie兼容html5 css3

/*css代码*/
.transparent{
opacity:0;
}
img{
position:absolute;
top:0;
left:0;
transition: opacity 0.5s;
}
img:hover{
opacity:0;
}

首先，大家需要将图片的透明度设置为0，这样图片就隐藏起来了。然后，大家给图片添加了一个hover事件，当鼠标移到图片上时，图片的透明度会变为0，从而显示出下面的图片。为了实现这个过渡效果，大家用了CSS3的transition属性，可以将图片的透明度从0到1的过渡效果设置为0.5秒。

需要注意的是，为了保证图片效果正常，大家需要将图片的position属性设置为absolute，并且将top和left属性设置为0。这样图片才能正确地显示在网页上。

最后，大家只需要将HTML代码中的图片class设置为transparent，就可以实现图片透明切换效果了。

总的来说，CSS3图片透明切换效果是一种非常简单而又有趣的效果，可以让大家的网页看起来更加生动和动态。只需要简单的几行代码，就可以实现非常酷炫的效果，让网页更加吸引人。希望本文能够对大家有所帮助。