样式(3) -- checkbox3

preview

demo预览

checkbox3.png

description

1.可自定义：
按钮大小 : checkboxSize，支持 em, rem, vw, px
宽高比 : checkboxWidthTimes
内容大小 : checkboxFontSizeTimes
动画时长 : SwitchingTime
按钮内容 : checkboxContentForOFF / checkboxContentForON
按钮背景 : checkboxBackgroundForOFF / checkboxBackgroundForOFF

2.label 使用 transform: skew(-10deg) 倾斜；label::after 与 label::after 使用 transform: skew(10deg) 抵消倾斜；

3.line-height 属性设置在 label 元素中，这样，如果我们使用 em 单位进行计算的时候，在 label::after 中动态设置 font-size 不会干扰 line-height 的计算。

scss

/* html

    
    

*/

* { padding: 0; margin: 0; box-sizing: border-box; }
*::after{ box-sizing: border-box; }
*::before{ box-sizing: border-box; }

$checkboxSize: 2em;
$checkboxWidthTimes: 2;
$checkboxFontSizeTimes: 0.5;
$checkboxFontFamily: sans-serif;
$checkboxBackgroundForOFF: #888;
$checkboxBackgroundForON: #86d993;
$SwitchingTime: 0.2s;
$checkboxContentForOFF: "OFF";
$checkboxContentForON: "ON";

$checkboxWidth: $checkboxWidthTimes * $checkboxSize;
$checkboxFontSize: $checkboxFontSizeTimes * $checkboxSize;

.checkboxWrapper {
  & label {
    font-size: inherit;
    display: block;
    width: $checkboxWidth;
    height: $checkboxSize;
    background-color: $checkboxBackgroundForOFF;
    transform: skew(-10deg);
    position: relative;
    overflow: hidden;
    transition: all $SwitchingTime ease;
    line-height: $checkboxSize;

    &::before, &::after {
      content: $checkboxContentForOFF;
      font-family: $checkboxFontFamily;
      font-size: $checkboxFontSize;
      font-size: 1em;
      color: white;
      font-weight: bold;
      text-align: center;
      position: absolute;
      transition: all $SwitchingTime ease;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      transform: skew(10deg);
    }
    &::after {
      left: 100%;
      content: $checkboxContentForON;
    }
  }
  & input:checked {
    & + label {
      background-color: $checkboxBackgroundForON;

      &::before {
        left: -100%;
      }

      &::after {
        left: 0;
      }
    }
  }

  & input {
    display: none;
  }
}