CSS iOS开关按钮及深色模式，点击查看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS iOS开关按钮及深色模式</title>
<style>
:root {
--button-width: 500px;
--button-height: 295px;
--switch-diameter: 255px;
--button-switch-offset: calc((var(--button-height) - var(--switch-diameter)) / 2);
--switch-shadow-offset: 10px;
--switch-wider: 333px;
--color-grey: #E9E9E9;
--color-dark-grey: #39393D;
--color-green: #30D158;
}
span {
display: inline-block;
width: var(--button-width);
height: var(--button-height);
background-color: var(--color-grey);
border-radius: calc(var(--button-height) / 2);
position: relative;
transition: .3s all ease-in-out;
}
span::after {
content: '';
display: inline-block;
width: var(--switch-diameter);
height: var(--switch-diameter);
background-color: #fff;
border-radius: calc(var(--switch-diameter) / 2);
position: absolute;
top: var(--button-switch-offset);
transform: translateX(var(--button-switch-offset));
box-shadow: var(--switch-shadow-offset) 0 calc(var(--switch-shadow-offset) * 4) rgba(0, 0, 0, .10);
transition: .3s all ease-in-out;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
input[type="checkbox"]:checked + span {
background-color: var(--color-green);
}
input[type="checkbox"]:checked + span::after {
transform: translateX(calc(var(--button-width) - var(--switch-diameter) - var(--button-switch-offset)));
box-shadow: calc(var(--switch-shadow-offset) * -1) 0 calc(var(--switch-shadow-offset) * 4) rgba(0, 0, 0, .10);
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:active + span::after {
width: var(--switch-wider);
}
input[type="checkbox"]:checked:active + span::after {
transform: translateX(calc(var(--button-width) - var(--switch-wider) - var(--button-switch-offset)));
}
/* 判断当前的系统是否启用了深色模式 */
@media(prefers-color-scheme: dark) {
body {
background-color: #1C1C1E;
}
span {
background-color: var(--color-dark-grey);
}
}
</style>
</head>
<body>
<label for="switch">
<input type="checkbox" id="switch">
<span></span>
</label>
</body>
</html>
