Css仿ios的开关按钮

Posted 2020-08-21

Css代码如下

        .al-toggle-button{
            appearance: none;
            -webkit-appearance: none;
            position: relative;
            width: 52px;
            height: 32px;
            background: #dfdfdf;
            border-radius: 16px;
            border: 1px solid #dfdfdf;
            outline: 0;
            box-sizing: border-box;
        }
        .al-toggle-button:checked{
            border-color: #04be02;
            background-color: #04be02;
        }
        .al-toggle-button:before, .al-toggle-button:after{
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            height: 30px;
            border-radius: 15px;
            transition: transform 0.3s;
            transition: -webkit-transform 0.3s;
            transition: transform 0.3s, -webkit-transform 0.3s;
            -webkit-transition: -webkit-transform 0.3s;
        }
        .al-toggle-button:before{
            width: 50px;
            background-color: #fdfdfd;
        }
        .al-toggle-button:after{
            width: 30px;
            background-color: white;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        }
        .al-toggle-button:checked:before{
            transform: scale(0);
            -webkit-transform: scale(0);
        }
        .al-toggle-button:checked:after{
            transform: translateX(20px);
            -webkit-transform: translateX(20px);
        }

html中引用

<input type="checkbox" class="al-toggle-button">

效果图~~