swicth 開關

時間 2019-12-08

標籤 swicth 開關简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .switch {
            position: relative;
            width: 30px;
            height: 16px;
            line-height: 16px;
            font-size: 14px;
            border-radius: 8px;
            background: #e0e0e0;
            transition: background-color 0.2s ease-in-out;
            cursor: pointer;
        }

        .switch .circle {
            position: absolute;
            left: 1px;
            top: 50%;
            transform: translateY(-50%);
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background-color: #fff;
            box-shadow: 0 0 2px 0 rgba(29, 77, 164, 0.4);
            transition: width 0.2s ease-in-out, height 0.2s ease-in-out, left 0.2s ease-in-out;
        }

        .switch.mixture {
            background: #4387ff;
        }

        .switch.mixture .circle {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 4px;
            height: 12px;
            border-radius: 6px;
        }

        .switch.on {
            background: #4387ff;
        }

        .switch.on .circle {
            left: calc(100% - 15px);
            transform: translate(0, -50%);
            width: 14px;
            height: 14px;
            border-radius: 50%;
        }

        /*# sourceMappingURL=index.css.map */
    </style>
</head>

<body>
    <div class='switch'> <span class='circle'></span>
    </div>
</body>

</html>
複製代碼

js控制點擊增長、移除類名‘on’便可css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。