CSS | 自定义动画切换开关_css 开关动画

1 概述

先看一下效果：

2 代码实现

HTML

<div class="center">
  <input type="checkbox" name="" id=""/>
</div>
1
2
3

<input> 元素是 web 中的表单交互式控件，接受来自用户的数据；此处的类型选择 checkbox。

CSS

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input[type="checkbox"] {
  position: relative;
  width: 80px;
  height: 40px;
  -webkit-appearance: none;
  background: #c6c6c6;
  outline: none;
  cursor: pointer;
  border-radius: 20px;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  transition: background 300ms linear;
}

input:checked[type="checkbox"] {
  background: #03a9f4;
}

input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: #fff;
  box-shadow:  0 2px 5px rgba(0,0,0,0.2);
  transition: left 300ms linear;
  transform: scale(1.1);
}

input:checked[type="checkbox"]::before {
  left: 40px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

采用了input 的伪元素、伪类实现切换动画效果。