CSS_9

$color1:#FF6F80;$兼容性:('',-moz-,-webkit-,-o-);///关键帧混合宏///使用Sass定义关键帧：https://www.sass.hk/skill/sass138.html@mixinkeyframes($animationName){@keyframes#{$animationName}{@content;}@-webkit-keyframes#{$animationName}{@content;}@-moz-keyframes#{$animationName}{@content;}@-o-keyframes#{$animationName}{@content;}}///拨动开关。btn-switch{显示：内联块；宽度：2.25rem！重要；高度：1.25rem；位置：相对；font-size:0;}.btn-switchlabel{display:inline-block;宽度：2.25rem！重要；高度：1.25rem；位置：绝对；顶部：0；left:0;}.btn-switchlabeli{display:inline-block;宽度：2.25rem！重要；高度：1.25rem；背景：#BFBFBF；边界半径：0.75rem；位置：绝对；顶部：0；left:0;}.btn-switch标签i::after{content:"";宽度：1.125rem；高度：1.125rem；背景：#FFFFFF；边界半径：50%；位置：绝对；左：1px；顶部：计算（（1.25rem-1.125rem）/2）；z-index:1;}.btn-switchinput[value=false]:checked+label{display:none;}.btn-switchinput[value=false]+labeli::after{@each$iin$compatibility{#{$i}animation:.3sswitchOn1linearalternateforwards;}}.btn-switchinput[value=false]+labeli{background-color:$color1;}.btn-switchinput[value=true]:checked+label{display:none;}.btn-switchinput[value=true]+labeli::after{@each$iin$compatibility{#{$i}animation:.3sswitchOff1linearalternateforwards;}}///@deprecated///为了不被初始化，因为动画默认没有被选中，所以动画被复用：focus///:not(:checked)表示未被选中//.btn-switch输入:focus:not(:checked)+i::after{//@each$iin$compatibility{//#{$i}animation:.3sswitchOff1linearalternateforwards;//}//}@include关键帧(switchOn){从{左:1px;}到{左：计算（100%-1.125rem-1px）；}}@includekeyframes(switchOff){from{left:calc(100%-1.125rem-1px);}到{左：1px;}}