css中图片的切换效果 |css3中-o-

/* 图片切换效果1：鼠标悬浮显示不同图片 */
#img-hover {
background-image: url('pic1.jpg');
width: 200px;
height: 200px;
}
#img-hover:hover {
background-image: url('pic2.jpg');
}
/* 图片切换效果2：定时切换多张图片 */
#img-auto {
background-image: url('pic1.jpg');
width: 200px;
height: 200px;
animation: imgauto 6s infinite;
}
@keyframes imgauto {
0% {
background-image: url('pic1.jpg');
}
33% {
background-image: url('pic2.jpg');
}
66% {
background-image: url('pic3.jpg');
}
100% {
background-image: url('pic1.jpg');
}
}
/* 图片切换效果3：点击切换不同图片 */
#img-click {
background-image: url('pic1.jpg');
width: 200px;
height: 200px;
cursor: pointer;
}
#img-click:active {
background-image: url('pic2.jpg');
}

以上是三种简单的图片切换效果，可以通过CSS轻松实现。其中最常用的是第一种方式，鼠标悬浮效果，常用于动态展示商品图片等。第二种方式则是用于轮播图的实现，通过设置不同背景图片和动画时间，定时切换不同的图片。最后，第三种方式通过添加光标样式，实现简单的点击切换效果。