css3实现switch开关效果

悠悠 2022-01-30 19:51 389阅读 0赞

## [css3实现switch开关效果][css3_switch] ##

之前阿里电面的时候问的一个问题，今天抽时间做了个demo。

![997342-20160830141340871-1458163402.png][]

html结构

![复制代码][copycode.gif]

![复制代码][copycode.gif]

css代码，:before负责颜色，:after是那个白色小圆点，切换时的过渡效果用css3的动画实现。

![复制代码][copycode.gif]

.switch{
            display:none;
        }
        label{
            position:relative;
            display: block;
            padding: 1px;
            border-radius: 24px;
            height: 22px;
            margin-bottom: 15px;
            background-color: #eee;
            cursor: pointer;
            vertical-align: top;
            -webkit-user-select: none;
        }
        label:before{
            content: '';
            display: block;
            border-radius: 24px;
            height: 22px;
            background-color: white;
            -webkit-transform: scale(1, 1);
            -webkit-transition: all 0.3s ease;
        }
        label:after{
            content: '';
            position: absolute;
            top: 50%;  
            left: 50%;  
            margin-top: -11px;  
            margin-left: -11px;
            width: 22px;
            height: 22px;
            border-radius: 22px;
            background-color: white;
            box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.08);
            -webkit-transform: translateX(-9px);
            -webkit-transition: all 0.3s ease;
        }
        .switch:checked~label:after{
            -webkit-transform: translateX(9px);
        }
        
        .switch:checked~label:before{
            background-color:green;
        }

![复制代码][copycode.gif]

[css3_switch]: https://www.cnblogs.com/czzaiba/p/5821831.html
[997342-20160830141340871-1458163402.png]: /images/20220130/9baafaec72114f468d0f3ffcc90442c0.png
[copycode.gif]: /images/20220130/b52659ce9c4b412293d972771294bb21.png