CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style type="text/css"> 
div{ 
 300px; 
height: 300px; 
border: #000 solid 1px; 
margin: 50px auto; 
overflow: hidden; 
} 
div img{ 
cursor: pointer; 
transition: all 0.6s; 
} 
div img:hover{ 
transform: scale(1.4); 
} 
</style> 
</head> 
<body> 
<div> 
<img src="img/focus.png" /> 
</div> 
</body> 
</html>

其中：

transition: all 0.6s;　　表示所有的属性变化在0.6s的时间段内完成。

transform: scale(1.4);　　表示在鼠标放到图片上的时候图片按比例放大1.4倍。