css完全模仿微信switch开关和ios手机的switch开关,无需要js。
首页 /  web前端 /  css3 / 纯css3模仿ios手机的switch开关

0 0 245

纯css3模仿ios手机的switch开关

css完全模仿微信switch开关和ios手机的switch开关,无需要js。

纯css3模仿ios手机的switch开关_图一
纯css3模仿ios手机的switch开关_图二

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿ios开关</title>
    <style>
        .ios-switch{
            width: 50px;
            height: 26px;
            border: 1px solid #e2e2e2;
            border-radius: 20px;
            -webkit-appearance: none;
            user-select: none;
            outline: none;
            background-color: #ffffff;
            box-shadow: #c2c2c2 0 0 0 0 inset;
            position: relative;
            transition:.5s;
        }
        .ios-switch:before{
            content: '';
            width: 22px;
            height: 22px;
            border-radius: 100%;
            background-color: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
            position: absolute;
            left:0;
            top:1px;
            transition:0.3s;
        }
        .ios-switch:checked{
            border-color: #1296db;
            background-color: #1296db;
        }
        .ios-switch:checked:before{
            left:26px;
        }
    </style>
</head>
<body>
    <input type="checkbox" name="ios-switch" class="ios-switch" id="ios-switch">
</body>
</html>
下载所需:0 金币 下载 演示

[来源] https://blog.csdn.net/connie_0217/article/details/80264079

[声明] 本站资源来自用户分享,如损害你的权益请联系客服QQ:120074275给予处理。

容若 2018-07-18 11:03
10
送花
20积分一朵