暑期学习日记35：图片缩放动画

最新推荐文章于 2023-04-24 10:55:53 发布

土肥圆波太郎

最新推荐文章于 2023-04-24 10:55:53 发布

阅读量123

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/weixin_48485475/article/details/126633677

版权

今天学习了使用html+css实现图片缩放动画，将鼠标移动到图片上会使图片放大。

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片缩放动画</title>
	<style>
		.main{
			width:200px;
		    height:175px;
			position: relative;
			overflow: hidden;
		}
		.main img{
			width: 200px;
		}
		.main img:hover{
			transform: scale(1.5);
			transition: 0.5s;
			cursor: pointer;
		}
		.btys{
			width: 100%;
			height: 30px;
			background: black;
			position: absolute;
			bottom: 0px;
			left: 0px;
			opacity: 0.5;
		}
		.main a{
			position: absolute;
			bottom: 5px;
			left: 50px;
			color: white;
			text-decoration: none;
		}
	</style>
</head>
<body>
	<div class="main">
		<img src="hua1.jpg" alt="">
		<div class="btys"></div>
		<a href="">这是一朵花花</a>
	</div>
</body>
</html>

显示效果为：

正常状态下：