用纯CSS做的图片切换

Posted 2020-08-05 mumushi

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用纯CSS做的图片切换相关的知识，希望对你有一定的参考价值。

　　前段时间做了一个用css做的图片切换。

　 我们先来看下html结构：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
    </head>
    <body>

        <input type="radio" name="btn" id="btn1" class="btn1" checked/>
        <input type="radio" name="btn" id="btn2" class="btn2"/>
        <input type="radio" name="btn" id="btn3" class="btn3"/>
        <!--首先我们要先设置几个单选按钮，要注意标签的位置，不能乱-->
        <br />
        <!--一个单选按钮设置两个label，一个放在左边，一个放在右边-->
        
        <!--左边label-->
        <label for="btn1" class="lb1-1">btn1-1</label>
        <label for="btn2" class="lb2-1">btn2-1</label>
        <label for="btn3" class="lb3-1">btn3-1</label>
        
        <!--中间是图片，这里用div代替-->
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        
        <!--右边label-->
        <label for="btn1" class="lb1-2">btn1-2</label>
        <label for="btn2" class="lb2-2">btn2-2</label>
        <label for="btn3" class="lb3-2">btn3-2</label>
    </body>
</html>

　　再看下CSS样式：

　　这里设置了div，跟label的CSS样式：

div{
    display: inline-block; /*将div变成块级行内元素*/
    width: 200px;
    height: 200px;
}
.box1{
    background: #000;
}
.box2{
    background: #008000;
}
.box3{
    background: #ff0000;
}
label{
    padding: 10px;
    background: #ffd700;
}

　　然后再单选按钮input被checked时触发的效果：

/*按钮显示开始*/
/*再单选按钮input被checked时触发label*/
.btn1:checked~.lb2-2{
    background: #0000ff;
}
.btn2:checked~.lb1-1{
    background: #0000ff;
}
.btn2:checked~.lb3-2{
    background: #0000ff;
}
.btn3:checked~.lb2-1{
    background: #0000ff;
}
.btn3:checked~.lb4-2{
    background: #0000ff;
}
.btn4:checked~.lb3-1{
    background: #0000ff;
}
/*按钮显示结束*/

/*图片显示开始*/
/*再单选按钮input被checked时触发div*/
.btn1:checked~.box1{
    background: #0000ff;
}
.btn2:checked~.box2{
    background: #0000ff;
}
.btn3:checked~.box3{
    background: #0000ff;
}
/*图片显示结束*/

效果图如下：（蓝色为显示，其他都为隐藏，- -！做的有点难看。通过点击不同按钮实现图片的切换。上面的CSS代码中，可以把background改为display，实现隐藏跟显示）

btn1-1 btn2-1 btn3-1

btn1-2 btn2-2 btn3-2

此为不懂js，用css做出来的图片切换，有点蛋疼。

重点在单选按钮input被checked时，利用关系选择符中的兄弟选择符触发其他兄弟元素的属性变化，还有就是html的标签位置，css不能回溯算法什么的（我也不懂），简单说就是不能通过后面控制前面的元素，不能通过子元素控制父元素什么的。所以这里要input标签放在最前面，这样才能通过兄弟选择符控制其他兄弟元素。

就到这了...

以上是关于用纯CSS做的图片切换的主要内容，如果未能解决你的问题，请参考以下文章

教你做炫酷的碎片式图片切换 (canvas)

用纯CSS样式实现的网页中圆角矩形（css代码）