一款CSS以及少量JS实现的开关挂锁动画效果,当鼠标悬浮于挂锁上时,锁会呈现左右晃动,当点击锁时,锁会打开并且掉落消失,实现很简单,其实是在HTML的checkbox组件上做的扩展,基础的HTML代码如下,只需要在CSS中对所得外观以及掉落动画进行时实现,在JS中实现点击掉落事件就可以了。这个动画非常适合开关切换场景使用。

一款CSS以及少量JS实现的开关挂锁动画效果,当鼠标悬浮于挂锁上时,锁会呈现左右晃动,当点击锁时,锁会打开并且掉落消失,实现很简单,其实是在HTML的checkbox组件上做的扩展,基础的HTML代码如下,只需要在CSS中对所得外观以及掉落动画进行时实现,在JS中实现点击掉落事件就可以了。这个动画非常适合开关切换场景使用。