在Web前端中如果我们想让一个图片放大的话，那么首先是要给这个做出一个装图片的盒子，在确定图片的确切大小是多少。步骤如图：
<body>
<div class="box">
<img src="../images/CN-wp5.jpg" alt="">
</div>
</body>
接下来做出图片的宽高和盒子的宽高,给装图片的盒子一个溢出隐藏：
.box{
width: 200px;
height: 200px;
/* 溢出隐藏 */
overflow: hidden;
}
.box img{
width: 200px;
height: 200px；
}
要通过滑动把图片放大的话，通常就会用上transfrom
.box img:hover{
/* 图片放大（1.5倍） */
transform: scale(1.5);
/* 平衡划过的时间 */
transition: 2s;
}
拿下来看看我们的效果图：
image.png
image.png
这样一个简易版的图片放大就做出来了。
学习Web前端的网页设计类的东西很麻烦，要多看、多听、多练。才能把这些东西融会贯通，一起加油学习吧。
网友评论