实现鼠标 hover 元素中心点放大效果
2016-11-29 本文已影响1633人
我是奋斗哥
对于之前实现鼠标 hover 元素从隐藏到出现的方法常用的有两种：
1.通过display：none；或者 visibility：hidden；来实现元素的隐藏，而通过设置被 hover 元素 display：block；或者 visibility：visible；来实现元素的重新显示。
2.通过设置宽或者高为 0 来实现元素隐藏，而通过重新设置被 hover 元素的宽高来实现元素的显示。
第一种方式无法实现动态的显示效果，而第二种方式可以实现较美观的动态效果，只需设置 transition：all .3s；即可。
但是，通过实践发现：若要实现从中心平滑放大的效果，第二种方式怎么也做不到那种平滑的效果。
通过第二种方式传统定位实现的，hover图片放大，不是从中心点放大，而是以左上角为起始位置向右下角方向延伸放大，这不是我们想要的效果。
那么，以此为基础作出假设若要实现从中心点的放大是不是只要将被 hover 的元素，居中就行了呢？
然而通过强制修改被 hover 元素的定位，在 hover 中将其设置居中，并不能实现想要的效果，元素依然从左上角向右下角延伸放大，只是在放大的过程的有一个位置的跳跃，跳跃到中间罢了，过渡非常生硬。
那么，如何才能实现鼠标 hover 元素中心点 “平滑” 放大效果呢？
传统的改变宽高的方式是行不通的，这时候需要用到 transform 属性，通过设置 transform: scale(1.2); 来实现中心放大的效果，当然其中的数值可以自己设置。
下面我分别给两个图片设置定位，一个是左上角定位，一个是居中定位（实现效果如下图）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div_1{
display: inline-block;
width: 500px;
height: 500px;
border: 1px solid blue;
position: relative;
}
.img1{
width: 400px;
height: 320px;
position: absolute;
left: 0;
top: 0;
transition: all .4s;
cursor: pointer;
}
.img1:hover{
zoom:1;
transform: scale(1.2);
}
.div_2{
display: inline-block;
width: 500px;
height: 500px;
border: 1px solid yellow;
position: relative;
}
.img2{
width: 400px;
height: 320px;
position: absolute;
top: 0;right: 0;bottom: 0;left: 0;
margin: auto;
transition: all .4s;
cursor: pointer;
}
.img2:hover{
zoom:1;
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="div_1">
<img class="img1" src="hy.jpg" alt="">
</div>
<div class="div_2">
<img class="img2" src="hy.jpg" alt="">
</div>
</body>
</html>
原始状态
左上角中心放大
居中中心放大
以上纯属个人学习总结，如有疏漏或者不足之处还望指正，谢谢！
