通过纯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>