CSS防IOS开关

最新推荐文章于 2024-07-18 14:29:38 发布

vicky_qiu

最新推荐文章于 2024-07-18 14:29:38 发布

阅读量334

点赞数

分类专栏：代码收藏文章标签： css

本文链接：https://blog.csdn.net/vicky_qiu/article/details/77896526

版权

代码收藏专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这里写图片描述

原理：
点击时，分为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>

vicky_qiu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS防IOS开关

原理：点击时，分为3步（同时进行） 1：CheckBox的背景颜色变为原谅色 2：CheckBox：after（小圆点）右移 3：CheckBox：before（小圆点旁边的白条）缩放（缩小为原来的0倍）<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>
复制链接

扫一扫