css3使图片具有淡入淡出的效果

来源：互联网发布：过程流程图软件编辑：程序博客网时间：2024/05/16 03:47

<div id="introduce"><div id="content"><div id="logo1"><img class="anim_fade_image" src="jslunbo1/images/logo1.png" /><img id="juzhong" src="jslunbo1/images/erweima1.png" /></div><div id="logo2"><img class="anim_fade_image" src="jslunbo1/images/logo2.png" /><img id="juzhong2" src="jslunbo1/images/erweima2.png" /></div><div id="logo3"><img class="anim_fade_image" src="jslunbo1/images/logo3.png" /><img id="juzhong3" src="jslunbo1/images/erweima3.png" /></div></div></div>

css样式如下：

 .anim_fade_image{     position:absolute;    -webkit-transition: opacity 3s ease-in-out;    -moz-transition: opacity 3s ease-in-out;    -o-transition: opacity 3s ease-in-out;    transition: opacity 3s ease-in-out; }.anim_fade_image:hover, .anim_fade_image_hover {    opacity:0;    filter: alpha(opacity=0);}#juzhong{width: 216px;height: 308px;margin: 59.5px 41.5px;}#juzhong2{width: 216px;height: 308px;margin: 59.5px 41.5px;}#juzhong3{width: 216px;height: 308px;margin: 59.5px 52.5px;}

效果图如下：

鼠标放在图上：

鼠标一走恢复：

0 0