图片缓慢缩放再缓慢复原的方法

最新推荐文章于 2020-12-15 16:10:22 发布

caimaomaocai

最新推荐文章于 2020-12-15 16:10:22 发布

阅读量787

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/caimaomaocai/article/details/81126473

本文介绍了一个使用CSS实现图片缩放过渡效果的例子。通过简单的HTML结构和CSS样式设置，当鼠标悬停在图片上时，图片会平滑地放大1.5倍。此效果适用于网页设计中增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关键部分代码，图片设置transition

.container a img {
	/*width:100%;*/
	cursor:pointer;
	transition:all 0.3s;
}

例子部分

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>缩放效果</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container">
		<a href="#">
			<div class="imgBox"><img src="images/1.jpg" alt=""></div>
		</a>
		<a href="#">
			<div class="imgBox"><img src="images/2.jpg" alt=""></div>
		</a>
		<a href="#">
			<div class="imgBox"><img src="images/3.jpg" alt=""></div>
		</a>
		<a href="#">
			<div class="imgBox"><img src="images/4.jpg" alt=""></div>
		</a>
	</div>
</body>
</html>

css部分代码

body,div,a,img{
	margin:0;
	padding:0;
}

.container{
	padding-top:40px;
	width:900px;
	margin:0 auto;
}

.container a{
	display:inline-block;
	width:210px;
	height:400px;
	border:1px solid #ccc;
	text-align:center;
	line-height:410px;
	margin-right:5px;
	overflow:hidden;
}

.container a img {
	/*width:100%;*/
	cursor:pointer;
	transition:all 0.3s;
}

.container a:hover img{
	transform:scale(1.5);
	
}

（完）