CSS两张图切换,即使用CSS代码实现鼠标悬浮在图片上时,切换成另一张图片。下面是CSS代码实现的方法。.img-container { display: flex; justify-content:
CSS两张图切换,即使用CSS代码实现鼠标悬浮在图片上时,切换成另一张图片。下面是CSS代码实现的方法。
.img-container { display: flex; justify-content: center; } .img-container img { width: 300px; height: 200px; margin: 10px; transition: transform .5s ease; } .img-container img:hover { transform: scale(1.1); }
上述代码使用了flex布局,使图片水平居中显示。通过设置图片的宽度、高度、外边距和过渡效果,使图片鼠标悬浮时能够被放大。下面是HTML代码的实现。
<div class="img-container"> <img src="img1.jpg"> <img src="img2.jpg"> </div>
HTML代码中,将两张图片放在一个div容器中,并分别使用不同的路径引用图片。这样就能实现鼠标悬浮时,轻松地切换显示不同的图片。
粉丝
0
关注
0
收藏
0