<html lang="zh-cn">
<头>
<title>带逻辑的拨动开关</title>
身体 {
显示：柔性；
弹性方向：列；
对齐项目：居中；
调整内容：居中；
高度：100vh；
背景颜色：#121212；
颜色：#fff；
字体系列：Arial、无衬线字体；
}
.toggle-container {
显示：柔性；
对齐项目：居中；
边距：20px 0；
}
.切换标签{
左边距：10px；
字体大小：1.2rem；
背景颜色: rgb(64, 109, 94);
内边距：5px；
}
。转变 {
位置：相对；
显示：内联块；
宽度：50px；
高度：25 像素；
}
.切换输入{
不透明度：0；
宽度：0；
高度：0；
}
。滑块 {
位置：绝对；
光标：指针；
顶部：0；
左：0；
右：0；
底部：0；
背景颜色：#555；
边框半径：25px；
过渡：0.4s；
}
.slider:之前{
位置：绝对；
内容： ””;
高度：20px；
宽度：20px；
左：3px；
底部：2.5px；
背景颜色：白色；
边界半径：50%；
过渡：0.4s；
}
输入：选中.slider {
背景颜色：#4caf50；
}
输入：检查.slider：之前{
变换：translateX(24px)；
}
。盒子{
高度：250 像素；
宽度：300px；
背景颜色: rgb(8, 72, 51);
边框半径：10px；
内边距：5px；
}
</风格>
</头>
<div>
</div>
以上是使用 html css 和 javascript 切换乐趣的详细内容。更多信息请关注PHP中文网其他相关文章！
