通过CSS结合JavaScript创建了一个“抛掷”风格的切换按钮,可用作开关切换、状态切换以及主题切换场景使用,给用户一种通过手柄将球抛向空中再落下的感觉。实现很简单,基础的HTML代码如下,然后再通过JS响应切换事件,通过CSS实现「抛物」以及「自由落体」的动画效果。最终我们可以实现一个既有趣又具有动态效果的切换开关。
<label for="toss-toggle" class="toss-toggle toss-toggle--pristine"> <input id="toss-toggle" class="toss-toggle__input" type="checkbox" name="toss_toggle" value="on"> <span class="toss-toggle__ball"></span> <span class="toss-toggle__sr">Launch!</span> </label>