其他分享
首页 > 其他分享> > 纯CSS中如何实现单击按钮开关

纯CSS中如何实现单击按钮开关

作者:互联网

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{margin: 0;padding: 0;}
            body{
                padding: 50px;
            }
            .toggle .box{
                display: inline-block;
                border-radius: 32px;
                width: 52px;
                height: 32px;
                background-color: #ccc;
                position: relative;
                transition: all ease 0.7s;  //延迟0.7秒完成改变
            }
           //在span中添加白球
            .toggle .box:after{
                content: "";
                position: absolute;
                left:2px;
                top:2px;
                width: 28px;
                height: 28px;
                background-color: #fff;
                border-radius: 28px;
                transition: all ease 0.7s; //延迟0.7秒完成改变
            }

//点击背景变色 复选框选中
            .toggle input:checked+.box{
                background-color: #007AFF;
            }

//点击白球移动
            .toggle input:checked+.box:after{
                left:23px;
            }
        </style>
    </head>
    <body>
        
        <label class="toggle">
            <input type="checkbox"/>
            <span class="box"></span>
        </label>
    </body>
</html>

//效果图

 

 

标签:box,单击,color,按钮开关,28px,0.7,toggle,background,CSS
来源: https://blog.csdn.net/liu957003092/article/details/120537309