css鼠标移上去图片放大效果

先手写,后期可以引入动画库,动画库待研究。。

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
img {  

  width:100px;

  height:100px;

  transition: all 0.5s;

  -moz-transition: all 0.5s; /* Firefox 4 */

  -webkit-transition: all 0.5s; /* Safari 和 Chrome */

  -o-transition: all 0.5s; /* Opera */

}
img:hover {

  transform: scale(1.1);

  -ms-transform: scale(1.1); /* IE 9 */

  -moz-transform: scale(1.1); /* Firefox */

  -webkit-transform: scale(1.1); /* Safari 和 Chrome */

  -o-transform: scale(1.1);

}

transform: all 0.5; all指的是width 和 height 同时变换,变换时间为0.5s,

transform: scale(1.1)指在原来的基础上放大1.1倍;