一个DIV实现一个漂亮的Switch开关

.switch,.switch::before,.switch::after{box-sizing:border-box;保证金：0；padding:0;}.switch{cursor:pointer;边框宽度：2px；边框样式：实心；边界半径：2rem；盒子阴影：00.1remrgba(0,0,0,0.05);位置：相对；过渡：所有.3s轻松；显示：内联块；宽度：3.2rem；高度：计算（1.7rem+5px）；背景色：#E9E9E9；边框颜色：#E9E9E9;}.switch.switch-checked{边框颜色：rgb(54,188,250);背景色：rgb(54,188,250);}.switch:after{content:'';顶部：0；左：0；边界半径：2rem；位置：绝对；宽度：1.7rem；高度：1.7rem；背景色：#ffffff；盒子阴影：.1rem.1rem.3remrgba(0,0,0,0.25);转换：translateX(0)scale(1,1);transition:all.3sease;}.switch.switch-checked:after{transform:translateX(1.4rem);margin-left:-2px;}.switch:active:after{width:2.04rem;}.switch.switch-checked:active:after{width:2.04rem;margin-left:-.45rem;}代码说明开关动画效果是通过增删“switch-checked”类实现的