16.切换开关 & 图像文本叠加

切换开关

仅使用 CSS 创建一个切换开关。

• 使用 for 属性将 <label> 与复选框 <input> 元素关联。
• 使用 <label> 的 ::after 伪元素为开关创建一个圆形旋钮。
• 使用 :checked 伪类选择器来改变旋钮的位置,使用 transform: translateX(20px) 和开关的 background-color。
• 使用 position: absolute 和 left: -9999px 来在视觉上隐藏 <input> 元素。

<input type="checkbox" id="toggle" class="offscreen" />
<label for="toggle" class="switch"></label>

.switch {
 position: relative;
 display: inline-block;
 width: 40px;
 height: 20px;
 background-color: rgba(0, 0, 0, 0.25);
 border-radius: 20px;
 transition: all 0.3s;
}

.switch::after {
 content: '';
 position: absolute;
 width: 18px;
 height: 18px;
 border-radius: 18px;
 background-color: whit