大家可以看到我博客的文章列表图片，当鼠标移动上去的时候图片会自动放大，这种效果制

作起来很简单，要用到css3的属性transition以及transform。先来解释一下这两个属性：

CSS3 transition 属性

实例

把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：

div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}

div:hover
{
width:300px;
}

亲自试一试

语法

transition: property duration timing-function delay;

那么，如果我们希望长宽一起变化，可以加all，写成这样,

div
{
width:100px;
height:100px;
transition: all 2s;
-moz-transition: all 2s; /* Firefox 4 */
-webkit-transition: all 2s; /* Safari 和 Chrome */
-o-transition: all 2s; /* Opera */
}

div:hover
{
width:300px;
height:300px;
}

但是这样的效果跟我的博客效果有点区别，那就是长宽是向右下角变化的，并没有从中心放

大的效果，这时候就要配合transform一起使用了。

CSS3 transform 属性

实例

放大 img 元素：

img
{
 	transform:scale(1.1,1.1);
	-moz-transform:scale(1.1,1.1); 
	-webkit-transform:scale(1.1,1.1);
}

scale（1.1,1.1）意思是沿着x轴，y轴放大1.1倍，放大是一瞬间的，没有延迟的动画效

果，但当配上第一个属性，就会有这种动画效果。

看下面的完整代码：

img{
	width: 200px;
	height: 125px;	
	transition: all 1s;
	-moz-transition: all 1s; /* Firefox 4 */
	-webkit-transition: all 1s; /* Safari 和 Chrome */
	-o-transition: all 1s; /* Opera */
}
img:hover{
 	transform:scale(1.1,1.1);
	-moz-transform:scale(1.1,1.1); 
	-webkit-transform:scale(1.1,1.1);
}

来自Anson博客

2016年5月26日