实现一个鼠标移入，图片放大的效果

最新推荐文章于 2022-05-23 20:25:37 发布

青衣浏阳

最新推荐文章于 2022-05-23 20:25:37 发布

阅读量552

点赞数

文章标签： css3 html5

本文链接：https://blog.csdn.net/m0_49016709/article/details/116117425

版权

网站开发的时候，做一个图的展示效果，鼠标移入，图片放大。
这里提供一个简单的思路，使用css3的transform和transition，
使用transform的scale的缩放放大。配合transition做一个渐变。
代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.img{
				width: 200px;
				height: 200px;
				transition: all .3s;
			}
			.img:hover{
				transform: scale(1.1);
			}
		</style>
	</head>
	<body>
		<div>
			<img src="https://cdn-inshoot.hsuanyuen.com/in-shoot/2021/04/21/water/53b3d41e869d87d287eb6042baea12a4.jpg" alt="" class="img">
		</div>
	</body>
</html>