[CSS] iOS开关按钮 [练习]

案例来源

本例来自CodingStartup的视频：[CSS] iOS开关按钮（CSS变数、深色模式）

案例演示

在线演示

知识总结

1. 定义css变量：--color-gray: #E9E9E9;，我们可以将css变量定义在:root伪类中，这样变量在所有位置都可以使用。使用css变量通过var()函数使用：background-color: var(--color-dark-gray);。
2. display: none;的效果相对于在页面中去除元素，外观和位置都去掉，而非只是透明。
3. :active表示点击按住不动的情况，对于checkbox来说，除直接使用:active，还有一个是在选中的时候使用，使用:checked:active
4. 适配mac的暗黑模式，使用@media (prefers-color-scheme: dark)，在其中写下暗黑模式的css样式即可。
5. 不论::before还是::after，都相当于所使用元素的子元素，所以可以使用父相子绝的定位方式。

• 注：其他知识点在之前的练习中均有提及。

主要代码

html

css

:root {
    --button-width: 500px;
    --button-height: 295px;
    --toggle-diameter: 255px;
    --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
    --toggle-shadow-offset: 10px;
    --toggle-wider:333px;
    --color-gray: #E9E9E9;
    --color-dark-gray: #39393D;
    --color-green: #30D158;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

span {
    display: inline-block;
    width: var(--button-width);
    height: var(--button-height);
    background-color: var(--color-gray);
    border-radius: calc(var(--button-height) / 2);
    position: relative;
    transition: .3s background-color ease-in-out;
}

span::after {
    content: '';
    display: inline-block;
    width: var(--toggle-diameter);
    height: var(--toggle-diameter);
    background-color: #ffffff;
    border-radius: calc(var(--toggle-diameter) / 2);
    position: absolute;
    top: var(--button-toggle-offset);
    transform: translateX(var(--button-toggle-offset));
    box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0,0,0,.10);
    transition: .3s all ease-in-out;
}

input[type="checkbox"]:checked + span {
    background-color: var(--color-green);
}

input[type="checkbox"]:checked + span::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
    box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0,0,0,.10);
}

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"]:active + span::after {
    width: var(--toggle-wider);
}

input[type="checkbox"]:checked:active + span::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
}

@media (prefers-color-scheme: dark) {
    body{
        background-color: #1C1C1E;
    }

    span {
        background-color: var(--color-dark-gray);
    }
}