CSS防IOS开关

来源：互联网发布：漫步者煲耳机软件编辑：程序博客网时间：2024/06/16 15:51

这里写图片描述

原理：
点击时，分为3步（同时进行）
1：CheckBox的背景颜色变为原谅色
2：CheckBox：after（小圆点）右移
3：CheckBox：before（小圆点旁边的白条）缩放（缩小为原来的0倍）

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">        .al-toggle-button{/*默认背景为灰色*/            appearance: none;/*去掉复选框的默认样式，将背景显示出来*/            -webkit-appearance: none;            position: relative;            width: 52px;/*设置checkbox的宽高*/            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{/*设置0.3秒内，变换完毕*/            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{/*选中时：小圆点右侧的白色缩小为0*/            transform: scale(0);            -webkit-transform: scale(0);        }        .al-toggle-button:checked:after{/*选中时：小圆点右移*/            transform: translateX(20px);            -webkit-transform: translateX(20px);        }        </style>    </head>    <body>        <input type="checkbox" class="al-toggle-button">    </body></html>

阅读全文

0 0