在网页设计中,有时需要让两张图片交替出现。这可以通过CSS实现。下面我们将介绍一个简单的CSS实现方法。 /* CSS代码 */ .img-container { position: relative
在网页设计中,有时需要让两张图片交替出现。这可以通过CSS实现。下面我们将介绍一个简单的CSS实现方法。
/* CSS代码 */ .img-container { position: relative; width: 300px; height: 300px; } .img-container img { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.5s ease-in-out; } .img-container img:first-child { opacity: 1; } .img-container:hover img { opacity: 0; } .img-container:hover img:first-child { opacity: 0; } .img-container:hover img:last-child { opacity: 1; }
以上CSS代码中,.img-container是两张图片的父容器,width和height指定容器的宽度和高度,position: relative用于定位子元素。.img-container img定义了图片,使用position: absolute定位。opacity为0时表示透明,图片不可见。transition指定动画过渡效果,0.5s表示动画时长,ease-in-out表示速度变化。
.img-container img:first-child设置第一张图片,opacity为1表示不透明,第一张图片默认显示。.img-container:hover img表示当鼠标移到.img-container上时,所有图片的opacity变为0,即所有图片都透明。.img-container:hover img:first-child表示第一张图片的opacity变为0,即第一张图片变透明,.img-container:hover img:last-child表示最后一张图片的opacity变为1,即最后一张图片变不透明,实现图片交替效果。
通过以上CSS代码,即可实现两张图片交替出现的效果。这种方法简单易懂,适合初学者使用。
粉丝
0
关注
0
收藏
0