大家好，我是 Just，这里是「设计师工作日常」，今天分享的是用 css 打造一个切换界面暗黑模式的按钮开关，通过点击来切换太阳和月亮的图标。
《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。
目录
整体效果
核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。
核心代码
html 代码
<label class="label34">
<input class="inp34" type="checkbox">
<span class="check-span34"></span>
</label>
用
label和input标签绘制开关按钮，span标签绘制简约的月亮和太阳图标。
css 部分代码
.label34{
width: 60px;
height: 32px;
position: relative;
cursor: pointer;
}
.inp34{
display: none;
}
.check-span34{
width: 100%;
height: 100%;
display: block;
background-color: #383838;
border: 2px solid #383838;
box-sizing: border-box;
border-radius: 16px;
transition: 0.3s linear;
}
.check-span34:after{
content: '';
width: 22px;
height: 22px;
background-color: #383838;
box-shadow: inset -8px -4px 0 #ffffff;
border-radius: 11px;
position: absolute;
top: 5px;
left: 6px;
box-sizing: border-box;
transition: 0.3s ease-in-out;
}
.inp34:checked + .check-span34{
background-color: #ffffff;
}
.inp34:checked + .check-span34:after{
transform: translateX(26px);
background-color: orange;
box-shadow: none;
}
通过
:checked属性选择器获取开关的状态，利用span标签通过box-shadow属性来实现月亮和太阳图标，然后通过transition过渡属性来实现开关时月亮和太阳图标的过渡变化，给人视觉上开关的效果。
完整代码如下
html 页面
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>暗黑模式切换开关</title>
</head>
<body>
<div class="app">
<label class="label34">
<input class="inp34" type="checkbox">
<span class="check-span34"></span>
</label>
</div>
</body>
</html>
css 样式
/** style.css **/
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.label34{
width: 60px;
height: 32px;
position: relative;
cursor: pointer;
}
.inp34{
display: none;
}
.check-span34{
width: 100%;
height: 100%;
display: block;
background-color: #383838;
border: 2px solid #383838;
box-sizing: border-box;
border-radius: 16px;
transition: 0.3s linear;
}
.check-span34:after{
content: '';
width: 22px;
height: 22px;
background-color: #383838;
box-shadow: inset -8px -4px 0 #ffffff;
border-radius: 11px;
position: absolute;
top: 5px;
left: 6px;
box-sizing: border-box;
transition: 0.3s ease-in-out;
}
.inp34:checked + .check-span34{
background-color: #ffffff;
}
.inp34:checked + .check-span34:after{
transform: translateX(26px);
background-color: orange;
box-shadow: none;
}
页面渲染效果
以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。
[1] 原文阅读
CSS 是一种很酷很有趣的计算机语言，在这里跟大家分享一些 CSS 实例 Demo，为学习者获取灵感和思路提供一点帮助，希望你们喜欢。
我是 Just，这里是「设计师工作日常」，求点赞求关注！
标签：box,background,color,span34,开关,暗黑,border,check,css From： https://blog.csdn.net/justliu1989/article/details/136700327