在平时的网页上,尤其是在购物商城里面,当鼠标移动在图片上时,图片会进行相应的缩放。用css3就可以实现这一简单特效。
原效果:
鼠标移动到图片上:
关键词
1、transition:过渡属性
2、transform:这个属性允许我们对元素进行旋转、缩放、移动或倾斜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片放大</title>
</head>
<body>
<img src="img/web.png" width="100">
<style type="text/css">
body{
text-align: center;
}
img{
margin-top: 50px;
border: 1px solid #197AFC;
border-radius: 50%;
transition: all 0.5s; /*transition:过度属性*/
cursor: pointer; /*当鼠标进入图片的时候,鼠标的样式变为手型 */
}
img:hover{
transform: scale(1.5); /*transform:变形属性,scale:缩放1.1倍 */
}
</style>
</body>
</html>