css实现鼠标悬停图片放大

代码如下：

代码语言：javascript复制

<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的属性值在一定的时间区间内平滑过渡。 可以调节放大倍数以及放大过程所用时间。 效果：

scale transform transition

0 人点赞