css3切换图片不用过渡

CSS3提供了一种不用过渡就能切换图片的方法，下面我们来介绍一下：

/* 首先定义两个图片作为背景 */.bg1 {
    background-image: url('image1.png');
}
.bg2 {
    background-image: url('image2.png');
}
/* 定义一个单选框 */input[type="radio"] {
    display: none;
}
/* 给单选框设置一个标签 */label {
    cursor: pointer;
}
/* 图片容器 */.image-container {
    width: 500px;
    height: 300px;
    position: relative;
}
/* 图片 */.image-container .image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
/* 默认显示第一张图片 */.bg1 .image {
    z-index: 2;
}
/* 当单选框被选中时，将另一张图片放到最上层 */#radio2:checked ~ .bg1 .image {
    z-index: 1;
}
/* 当单选框被选中时，将第一张图片放到最上层 */#radio1:checked ~ .bg2 .image {
    z-index: 2;
}
    

这段代码使用了双背景层叠的方法，利用单选框的选中状态来控制背景层级，实现了图片的切换效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！