我是怎样制作这个逼真的红色开关的（纯CSS）

在制作过程中，我使用了各种不同的CSS技术，包括渐变，3D转换，动画和过渡。在本教程中，我将深入探讨其中的一些技术。

演示地址：http://haiyongcsdn.gitee.io/realistic-red-switch/

模拟状态

开关具有2个状态-开启和关闭，但是CSS无法保持这种状态。

为了解决这个问题，我们可以使用原生HTML元素之一。由于我们只需要维护2个状态，因此checkbox元素是一个不错的选择。我们可以使用:checkedCSS选择器根据复选框是否选中来应用CSS。

我们将整个内容包装在<label/>中，以将整个元素的click事件链接到复选框，然后使用CSS隐藏复选框本身。

<label class="switch