CSS如何实现鼠标移入时图片的放大效果及缓慢过渡效果

tangjin

作者

小编给大家分享一下CSS如何实现鼠标移入时图片的放大效果及缓慢过渡效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

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

源码：

<!DOCTYPEhtml>
<html>
	<head>
		<metacharset="utf-8">
		<title>css实现鼠标移入时的放大效果</title>
<styletype="text/css">
	div{
		width:200px;
		height:300px;
		margin:0auto;
		margin-top:100px;
	}
	divimg{
		width:100%;
		height:100%;
		transition:all0.6s;//设置动画执行的时间为0.6s
		cursor:pointer;
	}
	divimg:hover{
		transform:scale(1.2);//设置图片按照比例放大1.2倍
	}
</style>
	</head>
	<body>
		<div>
			<imgsrc="images/unnamed.jpg">
		</div>
	</body>
</html>

- 图片溢出div时遮罩：

源码：

<!DOCTYPEhtml>
<html>
	<head>
		<metacharset="utf-8">
		<title>css实现鼠标移入时的放大效果</title>
<styletype="text/css">
	div{
		width:200px;
		height:300px;
		margin:0auto;
		margin-top:100px;
		overflow:hidden;//图片超出div部分隐藏
	}
	divimg{
		width:100%;
		height:100%;
		transition:all0.6s;//设置动画执行的时间为0.6s
		cursor:pointer;
	}
	divimg:hover{
		transform:scale(1.3);//设置图片按照比例放大1.3倍
	}
</style>
	</head>
	<body>
		<div>
			<imgsrc="images/unnamed.jpg">
		</div>
	</body>
</html>

看完了这篇文章，相信你对“CSS如何实现鼠标移入时图片的放大效果及缓慢过渡效果”有了一定的了解，如果想了解更多相关知识，欢迎关注恰卡编程网行业资讯频道，感谢各位的阅读！

阅读全文

发布于 2021-03-17 20:54:37

css