<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>鼠标移到图片放大效果</title>
<style type="text/css">
p {
width: 120px;
height: 120px;
border: solid 1px #666;
margin: 100px auto;
overflow: hidden;
/*隐藏超过边界的*/
}
/*图片过渡变化*/
p img {
transition: all 0.5s;
cursor: pointer;
}
/*鼠标移到图片放大1.2倍*/
p img:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<p>
<img src="images\userHead.jpg" />
</p>
</body>
</html>
