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

时间:2021-04-16

  页面代码:

<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;
        }

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章