利用CSS中input制作开关、轮播图

1.利用input制作开关

<input type=”checkbox” name=”hobby”>吃饭
<input type=”checkbox” name=”hobby”>睡觉
<input type=”checkbox” name=”hobby”>打豆豆

以上是常用的input复选框用法。
我们可以利用复选框点击—选中,再点击-不选中的特点制作开关。
开关效果,里面不仅有效果图,也有代码,左上角的html和css可以点击查看喔!!!!

2.利用input制作轮播图

<input type=”radio” name=”gender”>男
<input type=”radio” name=”gender”>女

以上是常用的input单选框用法。
我们可以利用单选框只能选中其中一个制作轮播图。

轮播图效果
由于代码比较长,就粘贴下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        input{
            display: none;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #box{
            width: 500px;
            height: 500px;
            margin: 0 auto;
            border:5px solid black;
            /*超出部分隐藏*/
            overflow: hidden;
            position: relative;
            text-align: center;
        }
        .list{
            /*让ul横着排放超出box*/
            width: 400%;
            /*利用position:absolute不占位*/
            position: absolute;
            /*过渡执行时间为1s*/
            transition:1s;
        }
        .list li{
            float:left;
            width: 500px;
            height: 500px;
        }
        label{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 5px solid white;
            position: absolute;
            bottom:40px;
            z-index: 2;
        }
        /*设置每个圆圈的位置*/
        label:nth-of-type(1){
            left:180px;
        }
        label:nth-of-type(2){
            left:220px;
        }
        label:nth-of-type(3){
            left:260px;
        }
        label:nth-of-type(4){
            left:300px;
        }
        input:checked+label{
            background:black;
        }
        /*选中移动ul*/
        input:nth-of-type(1):checked~ul{
            left:0;
        }
        input:nth-of-type(2):checked~ul{
            left:-100%;
        }
        input:nth-of-type(3):checked~ul{
            left:-200%;
        }
        input:nth-of-type(4):checked~ul{
            left:-300%;
        }
    </style>
</head>
<body>
<div id="box">
    <input checked type="radio" name="pic" id="one">
    <label for="one"></label>
    <input type="radio" name="pic" id="two">
    <label for="two"></label>
    <input type="radio" name="pic" id="three">
    <label for="three"></label>
    <input type="radio" name="pic" id="four">
    <label for="four"></label>
    <ul class="list">
        <li style="background: red;"></li>
        <li style="background: blue;"></li>
        <li style="background: yellow;"></li>
        <li style="background: brown"></li>
    </ul>
</div>
</body>
</html>
    原文作者:梁志芳
    原文地址: https://segmentfault.com/a/1190000014287837
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞