CSS实现鼠标移入时图片的放大效果及缓慢过渡效果的示例代码

transform:scale()可以实现按比例放大或者缩小功能。
transition可以设置动画执行的时间，实现缓慢或者快速的执行动画，效果图如下：

源码：

	
		
		
 
 	div{
 		width: 200px;
 		height: 300px;
 		margin:0 auto;
 		margin-top: 100px;
 	}
 	div img{
 		width: 100%;
 		height: 100%;
 		transition: all 0.6s;    //设置动画执行的时间为0.6s
 		cursor: pointer;
 	}
 	div img:hover{
 		transform: scale(1.2);     //设置图片按照比例放大1.2倍
 	}
 
	
	
		
			


		
	

- 图片溢出div时遮罩：

源码：

	
		
		
 
 	div{
 		width: 200px;
 		height: 300px;
 		margin:0 auto;
 		margin-top: 100px;
 		overflow: hidden;    //图片超出div部分隐藏
 	}
 	div img{
 		width: 100%;
 		height: 100%;
 		transition: all 0.6s;    //设置动画执行的时间为0.6s
 		cursor: pointer;
 	}
 	div img:hover{
 		transform: scale(1.3);     //设置图片按照比例放大1.3倍
 	}
 
	
	
		
			


		
	

到此这篇关于CSS实现鼠标移入时图片的放大效果及缓慢过渡效果的示例代码的文章就介绍到这了,更多相关css鼠标移入图片放大内容请搜索考高分网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持考高分网！