实现鼠标 hover 元素中心点放大效果

对于之前实现鼠标 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); 来实现中心放大的效果,当然其中的数值可以自己设置。


下面我分别给两个图片设置定位,一个是左上角定位,一个是居中定位(实现效果如下图)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!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>

原始状态

左上角中心放大

居中中心放大


以上纯属个人学习总结,如有疏漏或者不足之处还望指正,谢谢!

文章目录
  1. 1. 对于之前实现鼠标 hover 元素从隐藏到出现的方法常用的有两种:
    1. 1.1. 但是,通过实践发现:若要实现从中心平滑放大的效果,第二种方式怎么也做不到那种平滑的效果。
    2. 1.2. 那么,以此为基础作出假设若要实现从中心点的放大是不是只要将被 hover 的元素,居中就行了呢?
  2. 2. 那么,如何才能实现鼠标 hover 元素中心点 “平滑” 放大效果呢?
|