在很多设计图上，会有如下图开关或者单选，今天我就来讲讲如何用css去实现动态的开关。

html代码中，是很简单的

<inputtype="checkbox"id="1"class="checkbox"><labelclass="switch"for="1"></label>


下面是我们css代码

<style>.checkbox{display:none;}.switch{width:50px;height:31px;background:#56ACFE;border-radius:20px;padding:1px;box-sizing:border-box;display:inline-block;margin-top:15px;}.switch:after{content:'';box-shadow:03px8px0rgba(0,0,0,0.15),01px1px0rgba(0,0,0,0.16),03px1px0rgba(0,0,0,0.10);width:28px;height:28px;background:#fff;border-radius:50%;display:block;margin-left:1px;float:left;transition:all0.5s;}.checkbox:checked+.switch:after{margin-left:20px;}.checkbox:checked+.switch{background:#ccc;}</style>

就这样，就实现了这个设计图上和手机上经常出现的开关。


如果对你能有帮助的话，麻烦点赞，如果有意见或者建议的话，私信我哦！

我会继续努力积攒经验的，会给大家不定时分享基础知识点的*-*，关注我哦！