此HTML代码段展示了如何使用CSS实现图片的响应式设计。当鼠标悬停在图片上时，图片会放大并平滑过渡，具有1.2的缩放比例和0.3秒的动画效果。代码中定义了一个名为:image的类，包含两个200x150像素的二维码图片。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
background-color: black;
}
.image{
width: 400px;
height: 130x;
border:1px solid red;
overflow: hidden;
position: absolute;
display: inline-flex;
}
img:hover{
width: 220px;
height: 230px;
transform: scale(1.2);
transition: all .3s linear;
}
</style>
</head>
<body>
<div class="image">
<img src="img/erweima02.jpg" alt="" width="200px" height="150px">
<img src="img/erweima01.jpg" alt="" width="200px" height="150px">
</div>
</body>
</html>
扫一扫
3774
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
