09 手型开关按钮

效果演示

Code

<div class="checkbox-wrapper-41">
    <input type="checkbox">
</div>

body {
    height: 100vh;
    /* 设置 body 元素的高度为视窗的高度 */
    display: flex;
    /* 将 body 元素设置为弹性容器 */
    justify-content: center;
    /* 在主轴上居中对齐 */
    align-items: center;
    /* 在交叉轴上居中对齐 */
    background-color: #e8e8e8;
    /* body 元素的背景颜色 */
}

.checkbox-wrapper-41 {
    --size: 100px;
}

.checkbox-wrapper-41 input[type="checkbox"] {
    -webkit-appearance: none;
    width: var(--size);
    height: calc(var(--size) / 2);
    background-color: #fff;
    border: 3px solid #222;
    border-radius: 30px 100px 100px 100px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    outline: none;
    cursor: pointer;
    position: relative;
    transition: all 0.5s;
}

.checkbox-wrapper-41 input[type="checkbox"]::before {
    content: "";
    position: absolute;
    width: calc(var(--size) / 2);
    height: calc(var(--size) / 2);
    left: 0;
    top: 50%;
    transform: translateY(-50%) scale(0.7);
    border: 3px solid #222;
    border-radius: 30px 100px 100px 100px;
    background-color: #fde881;
    box-sizing: border-box;
    transition: all 0.5s;
}

.checkbox-wrapper-41 input[type="checkbox"]:checked {
    background-color: #fde881;
    border-radius: 100px 100px 30px 100px;
}

.checkbox-wrapper-41 input[type="checkbox"]:checked::before {
    left: 50%;
    background-color: #fff;
    border-radius: 100px 100px 30px 100px;
}

实现思路拆分

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e8e8e8;
}

设置 body 元素的样式：

• 设置 body 的高度为视口的高度。
• 使用 flexbox 将 body 元素的内容水平和垂直居中。
• 设置 body 的背景颜色为 #e8e8e8。

.checkbox-wrapper-41 {
    --size: 100px;
}

定义一个名为 “checkbox-wrapper-41” 的 CSS 类，并设置一个 CSS 变量 “–size” 的值为 100px。

.checkbox-wrapper-41 input[type="checkbox"] {
    -webkit-appearance: none;
    width: var(--size);
    height: calc(var(--size) / 2);
    background-color: #fff;
    border: 3px solid #222;
    border-radius: 30px 100px 100px 100px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    outline: none;
    cursor: pointer;
    position: relative;
    transition: all 0.5s;
}

设置类型为 “checkbox” 的 input 元素的样式：

• 禁用默认的外观样式。
• 设置宽度为 CSS 变量 “–size” 的值。
• 设置高度为 “–size” 的一半。
• 设置背景颜色为 #fff。
• 设置边框为 3px 宽的 #222。
• 设置边框的圆角为 30px 100px 100px 100px。
• 添加阴影效果。
• 取消轮廓线样式。
• 设置光标为指针形状。
• 设置相对定位。
• 添加所有属性的过渡效果，过渡时间为 0.5s。

.checkbox-wrapper-41 input[type="checkbox"]::before {
    content: "";
    position: absolute;
    width: calc(var(--size) / 2);
    height: calc(var(--size) / 2);
    left: 0;
    top: 50%;
    transform: translateY(-50%) scale(0.7);
    border: 3px solid #222;
    border-radius: 30px 100px 100px 100px;
    background-color: #fde881;
    box-sizing: border-box;
    transition: all 0.5s;
}

设置类型为 “checkbox” 的 input 元素的伪元素 ::before 的样式：

• 设置伪元素的内容为空。
• 设置绝对定位。
• 设置宽度为 “–size” 的一半。
• 设置高度为 “–size” 的一半。
• 将伪元素相对于父元素左上角的位置设置为 (0, 50%)，并通过 translateY(-50%) 将伪元素向上移动自身高度的一半。
• 使用 transform 缩放伪元素的大小为原来的 0.7 倍。
• 设置边框为 3px 宽的 #222。
• 设置边框的圆角为 30px 100px 100px 100px。
• 设置背景颜色为 #fde881。
• 设置盒模型为边框模型。
• 添加所有属性的过渡效果，过渡时间为 0.5s。

.checkbox-wrapper-41 input[type="checkbox"]:checked {
    background-color: #fde881;
    border-radius: 100px 100px 30px 100px;
}

当复选框被选中时，设置类型为 “checkbox” 的 input 元素的样式：

• 设置背景颜色为 #fde881。
• 设置边框的圆角为 100px 100px 30px 100px。

.checkbox-wrapper-41 input[type="checkbox"]:checked::before {
    left: 50%;
    background-color: #fff;
    border-radius: 100px 100px 30px 100px;
}

当复选框被选中时，设置类型为 “checkbox” 的 input 元素的伪元素 ::before 的样式：

• 将伪元素相对于父元素左上角的位置设置为 (50%, 50%)，使其水平居中。
• 设置背景颜色为 #fff。
• 设置边框的圆角为 100px 100px 30px 100px。