今天学习了使用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>
显示效果为:
正常状态下:
鼠标移入图片后: