图片hover之后等比例放大,鼠标移开又等比例恢复原状,同时带有动画过渡效果
使用CSS3中的transform属性;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hover放大效果</title>
<style type="text/css">
div{
900px;
height: 600px;
border: 1px solid #000;
margin: 50px auto;
overflow: hidden;
border-radius: 5px;
}
div img{
cursor: pointer;
transition: all 0.5s; /* 所有的属性变化在0.5s的时间段内完成 */
}
div img:hover{
transform: scale(1.5); /* 鼠标放到图片上的时候图片按比例放大1.5倍 */
}
</style>
</head>
<body>
<div>
<img src="D:桌面Codejs特效images/1.jpg" style=" 200px;height: 200px">
</div>
</body>
</html>