演示效果

动画.gif

封面.jpg

实现思路

自定义checkbox默认样式，并添加过渡效果来美化开启和关闭。

代码

html结构

<!DOCTYPE html>
<html lang="zh-CN">

<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>Demo</title>
    <!--图标样式-->
    <!-- <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"> -->

    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.1.1/css/all.css" rel="stylesheet">

    <link rel="stylesheet" href="style.css">
</head>

<body>
    <input type="checkbox" name="" id="custom">
    <label for="custom" class="check-box">
        <span class="check-handler"></span>
    </label>
</body>

</html>

css样式

body {
    height: 100vh;
    background: rgb(203, 203, 203);
    display: flex;
    justify-content: center;
    align-items: center;
}

input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.check-box {
    display: flex;
    align-items: center;
    width: 90px;
    height: 50px;
    background: #2c3e50;
    border-radius: 25px;
    transition: all 0.5s ease;
    cursor: pointer;
}

.check-handler {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #34495e;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    transition: all 0.5s ease;
}

.check-handler:before {
    font-family: "Font Awesome 6 Free";
    content: "\f00d";
    color: white;
    font-size: 1.5em;
    font-weight: 900;
}

input[type="checkbox"]:checked+.check-box {
    background: #16a085;
}

input[type="checkbox"]:checked+.check-box .check-handler {
    margin-left: 50%;
    background: #1abc9c;
}

input[type="checkbox"]:checked+.check-box .check-handler:before {
    font-family: "Font Awesome 6 Free";
    content: "\f00c";
}

gitee地址：siebe/html-css-demo (https://gitee.com/siebe/html-css-demo)
图标来源：图标库Font Awesome中的免费图标。

每天一个网页小实例，生活多姿又多彩。