百度圖片上鼠標移入的動畫效果是怎么寫的啊

圖片描述

https://image.baidu.com/searc...

回答

編輯回答

我不懂

hover之后將該區(qū)域塊顯示出來,然后加上animation，從左到右的滑動
舉個例子

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <style>
    ul li{list-style:none; width:100px; position:relative; float:left; overflow:hidden;}
    ul li img{width:100%;}
    ul li .info{position:absolute; bottom:0; left:0; width:100%; height:40px; line-height:40px; background:-webkit-gradient(linear, 0 0, 0 bottom, from(rgba(255,255,255,.2)), to(rgba(0,0,0,.2)));}
    .hide{display:none;}
    .slideleft{animation:left .5s 1; animation-fill-mode:forwards;}
    .slideright{animation:right .5s 1; animation-fill-mode:forwards;}
    .slidetop{animation:top .5s 1; animation-fill-mode:forwards;}
    .slidebottom{animation:bottom .5s 1; animation-fill-mode:forwards;}
    
    @keyframes left{
      from{left:-100%;}
      to{left:0;}
    }
    @keyframes top{
      from{bottom:-100%; left:0;}
      to{bottom:0; left:0;}
    }
    @keyframes bottom{
      from{bottom:100%;}
      to{bottom:0;}
    }
    @keyframes right{
      from{left:100%;}
      to{left:0;}
    }
  </style>
</head>
<body>
  <ul>
    <li>
      <img src="https://img1.epetbar.com/2017-05/24/10/7982bafb75e8aba985e08de99780be52.jpg?x-oss-process=style/fill&$1=300&$2=300" alt="">
      <div class="info hide">
        test
      </div>
    </li>
    <li>
      <img src="https://img1.epetbar.com/2017-05/24/10/7982bafb75e8aba985e08de99780be52.jpg?x-oss-process=style/fill&$1=300&$2=300" alt="">
      <div class="info hide">
        test
      </div>
    </li>
    <li>
      <img src="https://img1.epetbar.com/2017-05/24/10/7982bafb75e8aba985e08de99780be52.jpg?x-oss-process=style/fill&$1=300&$2=300" alt="">
      <div class="info hide">
        test
      </div>
    </li>
  </ul>

<script>
$("li").hover(function(e){
  var mX = e.clientX;
  var mY = e.clientY;
  var liLeft = $(this).offset().left;
  var liTop = $(this).offset().top;
  var liW = $(this).width();
  var liH = $(this).height();

  x = (mX - liLeft - ( liW  / 2 ) ) * ( liW  > liH ? (liH / liW ) : 1 )
  y = (mY - liTop - (liH / 2)) * (liH > liW ? (liW / liH) : 1),  
  // 上(0) 右(1) 下(2) 左(3)  
  direction = Math.round( ( ( ( Math.atan2( y, x ) * ( 180 / Math.PI ) ) + 180 ) / 90) + 3 ) % 4;
  if(direction == 0){
    $(this).find(".info").removeClass("hide").addClass("slidetop");
  }else if(direction == 1){
    $(this).find(".info").removeClass("hide").addClass("slideright");
  }else if(direction == 2){
    $(this).find(".info").removeClass("hide").addClass("slidebottom");
  }else if(direction == 3){
    $(this).find(".info").removeClass("hide").addClass("slideleft");
  }
},function(){
  $(this).find(".info").addClass("hide").removeClass("slideleft").removeClass("slidetop").removeClass("slideright").removeClass("slidebottom")
})
</script>
</body>
</html>

2017年3月16日 12:21

編輯回答