明天的明天 永远的永远 未知的一切 我与你一起承担 ??

是非成败转头空 青山依旧在 几度夕阳红 。。。
  博客园  :: 首页  :: 管理

css opacity 淡入淡出效果2

Posted on 2024-10-15 09:43  且行且思  阅读(2)  评论(0)  编辑  收藏  举报 
<!DOCTYPE html>
<html>
<script type="text/javascript" src="style/jquery-3.7.0.min.js?v=0.002?v=1.0.01"></script>
<head>
    <style>
        .fade {
           position: absolute;
          z-index: -2;
          left: 0;
          transform: translate3d(-100%, 0, 0);
          width: 0;
          opacity: 0;
          overflow: hidden;
          transition: all .8s;
          padding: 5px;
        }        
        .act1{
            width: 281px;
            opacity: 1;
            left: 15px;
            top:50px;
         }
        
        
        .fade2 {
           position: absolute;
          z-index: -2;
          left: 0;
transform: translateX(100px);
          width: 0;
          opacity: 0;
          overflow: hidden;
          transition: all .8s;
        }
        .act2{
            width: 281px;
            opacity: 1;
            right: 15px;
         }
         
         
         .fade3 {
           position: absolute;
          z-index: -2;
          left: 0;
transform: translate3d(-100%, -100%, -100%);
          width: 0;
          opacity: 0;
          overflow: hidden;
          transition: all .8s;
        }
        .act3{
            width: 281px;
            opacity: 1;
            left: 150px;
         }
    </style>
</head>
<body>
   <div  style="box-shadow: 0 3px 4px 0 rgba(137,145,157,.6);background: #fff3cd;position: relative;display: flex;box-sizing: border-box; width:200px; height:500px;left:50%;text-align:center;">
    
    <div class="user" style="margin-top:50px;width:200px; height:100px;text-align:center;">向左淡出</div>
    <div class="fade" style=" top:50px;color:blue;">
        <div style="width:300px;height:300px;">这是一个淡入效果的标题</div>
    </div>
    
    
    <div class="user2" style="margin-top:150px;width:200px; height:100px;text-align:center;">向右淡出</div>
    <div class="fade2" style="margin-top:150px; ">
        <div style="width:300px;height:300px;color:red;">这是一个淡入效果的标题</div>
    </div>
    
    
    <div class="user3" style="margin-top:250px;width:200px; height:100px;text-align:center;">向右淡出2</div>
    <div class="fade3" style="margin-top:250px; ">
        <div style="width:300px;height:300px;color:red;">这是一个淡入效果的标题</div>
    </div>
  </div>
    <script type="text/javascript">
     
 $(function(){
 
        $(".user").hover(
        function(){
           //当鼠标放上去的时候,程序处理
           //$(this).find(".fade").addClass("act4");
           $(".fade").addClass("act1");
        },
        function(){
           //当鼠标离开的时候,程序处理
           //$(this).find(".fade").removeClass("act4");
           $(".fade").removeClass("act1");
        });
        
        
        $(".user2").hover(
        function(){
           //当鼠标放上去的时候,程序处理
           //$(this).find(".fade").addClass("act4");
           $(".fade2").addClass("act2");
        },
        function(){
           //当鼠标离开的时候,程序处理
           //$(this).find(".fade").removeClass("act4");
           $(".fade2").removeClass("act2");
        });
        
        
        $(".user3").hover(
        function(){
           //当鼠标放上去的时候,程序处理
           //$(this).find(".fade").addClass("act4");
           $(".fade3").addClass("act3");
        },
        function(){
           //当鼠标离开的时候,程序处理
           //$(this).find(".fade").removeClass("act4");
           $(".fade3").removeClass("act3");
        });

    
})
</script>
</body>
</html>