前置知识：
Label的使用方式：
var函数：:root{
--background-color: red;
// 函数名： 函数值
}
.background {
background-color: var(--background-color);
}
伪元素：用于设置元素指定部分的样式。使用双冒号
eg: .background::after {
...
}
@keyframes动画：通过 @keyframes 规则，您能够创建动画。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。
为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。
## 语法
```
@keyframes animationname {keyframes-selector {css-styles;}}
```
| 值 | 描述 |
| -------------------- | --------------------------------------------------------------- |
| *animationname* | 必需。定义动画的名称。 |
| *keyframes-selector* | 必需。动画时长的百分比。合法的值： 0-100% --- from（与 0% 相同- to（与 100% 相同） |
| *css-styles* | 必需。一个或多个合法的 CSS 样式属性。
原理：利用check复选框，然后把复选框隐藏，使用label+span绘制
html部分：
<!-- 需要一个checkbox复选框，后面用css隐藏了 -->
<input type="checkbox" name="" id="toggle" class="toggle-box">
<!-- label用来制作外边的边框 -->
<label for="toggle" class="toggle-label">
<!-- span用来制作小球 -->
<span class="toggle-ball"></span>
</label>
<!-- 背景颜色 -->
<div class="background"></div>
出现了一个简单的复选框，接下来就开始写css部分
/* 设置了一堆var函数 */
:root {
--bule-background: #C2E9F6;
--bule-border: #72cce3;
--bule-color: #96dcee;
--yellow-background: #fffaa8;
--yellow-border: #f5eb71;
--indigo-background: #808fc7;
--indigo-border: #5d6baa;
--indigo-color: #6b7abb;
--gray-border: #e8e8ea;
--gray-dots: #e8e8ea;
--white: #fff;
}
/* 先去掉边距，再给Input隐藏了 */
* {
margin: 0;
padding: 0;
}
.toggle-box {
display: none;
}
/* 设置边框 */
.toggle-label {
display: block;
/* 相对定位，为了子绝父相 */
position: relative;
width: 200px;
height: 100px;
margin: 250px auto;
border: 5px solid var(--bule-border);
background: var(--bule-color);
border-radius: 100px;
}
一个大概的框就成型了，接下来画一个小球
/* 设置小球 */
.toggle-ball {
width: 82px;
height: 82px;
border: 5px solid var(--yellow-border);
position: absolute;
top: 4px;
left: 4px;
background: var(--yellow-background);
border-radius: 82px;
animation: reverse1 350ms forwards;
}
/* 制作两条横线,利用到了上面介绍的伪元素 */
.toggle-label::before {
content: "";
position: absolute;
top: 35px;
left: 130px;
width: 40px;
height: 5px;
background: var(--white);
border-radius: 5px;
transition: 150ms;
}
.toggle-label::after {
content: "";
position: absolute;
top: 60px;
left: 115px;
width: 40px;
height: 5px;
background: var(--white);
border-radius: 5px;
transition: 150ms;
}
/* 简单加个背景色（用不到可以不加） */
.background {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: var(--bule-background);
z-index: -1;
}
/* label点击之后 */
.toggle-box:checked+.toggle-label>.toggle-ball {
background: var(--white);
border-color: var(--gray-border);
/* 点击之后移动小球的动画 */
animation: switch 350ms forwards;
}
/* 给小球加上俩点，默认不显示 */
.toggle-ball::before {
content: '';
position: absolute;
width: 15px;
height: 15px;
left: 20px;
top: 15px;
border-radius: 50%;
background: var(--gray-border);
opacity: 0;
}
.toggle-ball::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
left: 10px;
top: 35px;
border-radius: 50%;
background: var(--gray-border);
opacity: 0;
}
/* 点击之后，小球显示俩点 */
.toggle-box:checked+.toggle-label>.toggle-ball::before {
opacity: 1;
}
.toggle-box:checked+.toggle-label>.toggle-ball::after {
opacity: 1;
}
/* 点击之后，背景颜色发生变化 */
.toggle-box:checked~.background {
background: var(--indigo-background);
}
/* 点击之后，label里面的颜色也要变化 */
.toggle-box:checked+.toggle-label {
background: var(--indigo-background);
border-radius: 80px;
}
/* 动画效果 */
@keyframes switch {
0% {
left: 4px;
}
60% {
left: 4px;
width: 112px;
}
100% {
left: 104px;
width: 82px;
}
}
@keyframes reverse1 {
0% {
left: 104px;
width: 82px;
}
60% {
left: 72px;
width: 112px;
}
100% {
left: 4px;
width: 82px;
}
}
/* 横线发生变化 */
.toggle-box:checked+.toggle-label::before {
width: 6px;
height: 6px;
top: 32px;
left: 40px;
}
.toggle-box:checked+.toggle-label::after {
width: 8px;
height: 8px;
top: 60px;
left: 55px;
}
关键指示：@keyframes动画加上过渡
全部代码：
