网站首页

图片镜头拉近效果

发布时间：1970-01-01 00:00查看次数：2750

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<style>
   img{
    transform: scale(1, 1);
    transition-duration: 250ms;
    transition-timing-function: ease-out;
}
   img:hover{
   overflow: hidden;
    transform: scale(1.25); /*放大1.25倍*/
    transition-duration: 750ms;
    transition-timing-function: ease-out;
}
   .maxa{
    border: 1px solid #ccc;
    height: 300px;
    width: 300px;
    overflow: hidden;       /*包围盒子溢出就裁剪掉*/
   }
   .max{
    width: 300px;
    display: block;
    height: 300px;
   }

</style>
<body>
   <div>
          <a href="">   <img src="./img/1.jpg" alt=""></a>
   </div>
</body>
</html>

关键字词：图片镜头拉近效果