css实现鼠标悬停图片放大

马修

发布于 2021-01-21 15:03:55

5.6K0

发布于 2021-01-21 15:03:55

代码如下：

<style>  
* {  
	margin: 0;  
	padding: 0;  
	font-family: "微软雅黑";  
}  
.avatar{  
	display: block;  
	width: 300px;  
	margin: 0 auto;  
	overflow: hidden;  
}  
  
.avatar img{  
	display: block;  
	border: 0;  
	width: 100%;  
	transform: scale(1);  
	transition: all 1s ease 0s;  
	-webkit-transform: scale(1);  
	-webkit-transform: all 1s ease 0s;  
}  	  
.avatar:hover img{  
	transform: scale(1.3);  
	transition: all 1s ease 0s;  
	-webkit-transform: scale(1.3);  
	-webkit-transform: all 1s ease 0s;  
}  
</style>

解析： transform:scale()可以实现按比例放大或者缩小功能。 transition允许CSS的属性值在一定的时间区间内平滑过渡。可以调节放大倍数以及放大过程所用时间。效果：