介绍 & lt; label 为=癱k2"比;
& lt;才能input 类型=癱heckbox", id=癱k2"比;
& lt;才能span>未选中,则关闭开关& lt;/span>
& lt;/label>
& lt; br>
为=& lt; label “ck1"祝辞
& lt;才能input 类型=癱heckbox", id=癱k1", checked>
& lt;才能span>选中,则打开开关& lt;/span>
& lt;/label> & lt; P>从状态草图& lt;/P>
& lt; div 类=皌oggle"祝辞
& lt;才能div 类=癱ookie"祝辞& lt;/div>
& lt;/div>
& lt; br>
& lt; P>状态草图& lt;/P>
& lt; div 类=皌oggle2"祝辞
& lt;才能div 类=癱ookie2"祝辞& lt;/div>
& lt;/div>
.toggle {
显示:才能inline-block;
位置:才能相对;
高度:才能25 px;
宽度:才能50 px;,,
border - radius才能:4 px;
背景:# CC0000;才能
}
.cookie {
位置:绝对的,才能
左:才能2 px;
上图:才能2 px;
底才能:2 px;
宽度:50%,才能
背景:才能rgba (230230230, 0.9);
border - radius才能:3 px;
}
.toggle2 {
显示:才能inline-block;
位置:才能相对;
高度:才能25 px;
宽度:50 px;才能,
填充才能:2 px;
border - radius才能:4 px;
背景:# 66 cc33;才能,,
}
.cookie2 {
位置:绝对的,才能
正确的才能:2 px;
上图:才能2 px;
底才能:2 px;,,
宽度:50%,才能
背景:才能rgba (230230230, 0.9);
border - radius才能:3 px;
} & lt; label 为=癱k4"比;
& lt;才能input 类型=癱heckbox", id=癱k4"比;
& lt;才能div 类=皌oggle"比;
,,,& lt; div 类=癱ookie"祝辞& lt;/div>
& lt;才能/div>
& lt;/label>
& lt; br>
为=& lt; label “ck3"祝辞
& lt;才能input 类型=癱heckbox", id=癱k3", checked>
& lt;才能div 类=皌oggle2"比;
,,,& lt; div 类=癱ookie2"祝辞& lt;/div>
& lt;才能/div>
& lt;/label> & lt; label 为=癱k5"比;
& lt;才能input 类型=癱heckbox", id=癱k5"比;
& lt;才能div 类=皌oggle-finish"比;
,,,& lt; div 类=癱ookie-finish"祝辞& lt;/div>
& lt;才能/div>
& lt;/label>
& lt; br>
为=& lt; label “ck6"祝辞
& lt;才能input 类型=癱heckbox", id=癱k6", checked>
& lt;才能div 类=皌oggle-finish"比;
,,,& lt; div 类=癱ookie-finish"祝辞& lt;/div>
& lt;才能/div>
& lt;/label>
.toggle-finish {
光标才能:指针;
显示:才能inline-block;
位置:才能相对;
高度:才能25 px;
宽度:才能50 px;,,
border - radius才能:4 px;
背景:# CC0000;才能
}
.cookie-finish {
位置:绝对的,才能
左:才能2 px;
上图:才能2 px;
底才能:2 px;
宽度:50%,才能
背景:才能rgba (230230230, 0.9);
border - radius才能:3 px;
}
输入:checked +, .toggle-finish {
背景:# 66 cc33;才能,,
}
输入:checked +, .toggle-finish .cookie-finish {,
左:才能汽车;
正确的才能:2 px;
}
这篇文章将为大家详细讲解有关如何使用纯css实现开关效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
<强>首先是构思
我们使用<代码> & lt;输入类型=癱heckbox"在标签来实现这个效果。
复选框的选中,未选中的特性,刚好对应开关的打开、关闭
:打开:关闭
开始画出,在状态的草图
这里要讲解一下,使用了位置来实现的定位。有不了解的同学可以打开MDN查看相关知识
然后我们将这两个草图放到标签内
,
结合标签和复选框整理,优化css
关于“如何使用纯css实现开关效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。
