html 开关状态,纯css如何实现开关效果？（代码示例）

下面本篇文章通过代码示例来给大家介绍一下纯css是如何实现开关效果的。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

首先是构思：

我们使用标签来实现这个效果。

checkbox的选中、未选中的特性，刚好对应开关的打开、关闭

on:打开 off:关闭

未选中，则关闭开关

选中，则打开开关

效果：

开始画出off、on状态的草图

这里要讲解一下，使用了position来实现的定位。有不了解的同学可以打开MDN查看相关知识

off状态草图

on状态草图

.toggle{

display:inline-block;

position:relative;

height:25px;

width:50px;

border-radius:4px;

background:#CC0000;

}

.cookie{

position:absolute;