scale之图片缩放
如下效果的实现是通过scale来完成的
使用hover配合scale以及transition过渡来实现
代码如下：
<!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>Document</title>
<style>
div {
margin: auto 50px;
}
img {
width: 100px;
height: 100px;
transition: all 0.4s;
}
img:hover {
transform: scale(1.2, 1.2);
}
</style>
</head>
<body>
<div><a href="#"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F7f%2F17%2Fcb%2F7f17cbbb07346aee44277bc4a3583b76.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650098569&t=1d4d595da2241324cdfddee4b6f6daef" alt=""></a></div>
<div><a href="#"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F7f%2F17%2Fcb%2F7f17cbbb07346aee44277bc4a3583b76.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650098569&t=1d4d595da2241324cdfddee4b6f6daef" alt=""></a></div>
<div><a href="#"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F7f%2F17%2Fcb%2F7f17cbbb07346aee44277bc4a3583b76.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650098569&t=1d4d595da2241324cdfddee4b6f6daef" alt=""></a></div>
</body>
</html>
