通过纯CSS实现的一款创意兼具趣味性的滚筒开关按钮，通过点击滚动实现开关或者其他相对状态的切换，圆柱体滚筒在不同的开关状态下呈现不一样的颜色。实现起来很简单，地下是HTML用到的部分代码，只需要通过CSS控制checkbox的切换动画效果和合理设置switch__handle及内部元素的属性即可实现最终效果。
<label class="switch"> <input class="switch__input" type="checkbox" role="switch"> <span class="switch__handle"> <span class="switch__handle-sides"> <span class="switch__handle-side"></span> </span> <span class="switch__handle-labels"> <span class="switch__handle-label" aria-hidden="true">Off</span> <span class="switch__handle-label" aria-hidden="true">On</span> </span> <span class="switch__handle-texture"></span> </span> <span class="switch__label">Power</span> </label>
