样式(5) -- checkbox5

preview

demo预览

checkbox4

description

1.可自定义：
按钮大小 : $checkboxSize，支持 rem, vw, px ; 不支持 em;
宽高比 : $checkboxWidthTimes
文本大小占比 : $checkboxFontSizeTimes
动画时长 : $switchingTimeCost
按钮文本 : $checkboxTextForOFF / $checkboxTextForON
主题颜色 : $checkboxColorForOFF / $checkboxColorForON / $checkboxFontColor
border-radius : $checkboxBorderRadiusSize

2.注意事项：
3d 效果的 perspective 要设置在动画元素的父级（这里是 label 元素）；并且，在 label 元素上设置 overflow: hidden 会导致 perspective 无效。

scss

/* html
<div class="checkboxWrapper">
    <input type="checkbox" value="" id="slideID" name="slide" checked>
    <label for="slideID"></label>
</div>
*/


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

body {
  margin: 30px;
}

$checkboxSize: 30px;
$checkboxWidthTimes: 2.0;
$checkboxFontSizeTimes: 0.6;
$checkboxBackgroundColorForOFF: #7FC6A6;
$checkboxBackgroundColorForON: #FF3A19;
$checkboxTextForON: "OFF";
$checkboxTextForOFF: "ON";
$checkboxBorderRadiusSize: 5px;
$switchingTimeCost: 0.2s;
$checkboxFontColor: #fff;

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

.checkboxWrapper {
  input {
    display: none;
    &:checked + label {
      &::before {
        transform: rotateY(180deg);
      }
      &::after {
        transform: rotateY(0deg);
      }
    }
  }

  & label {
    display: block;
    width: $checkboxWidth;
    height: $checkboxSize;
    perspective: 100px;
    line-height: $checkboxSize;
    text-align: center;
    position: relative;

    &::before, &::after{
      content: $checkboxTextForON;
      display: block;
      width: $checkboxWidth;
      height: $checkboxSize;
      background-color: $checkboxBackgroundColorForON;
      font-size: $checkboxFontSize;
      font-weight: bold;
      color: $checkboxFontColor;
      transform: rotateY(0deg);
      transition: all $switchingTimeCost ease;
      backface-visibility: hidden;
      border-radius: $checkboxBorderRadiusSize;
      position: absolute;
      top: 0;
      left: 0;
    }

    &::after {
      content: $checkboxTextForOFF;
      transform: rotateY(-180deg);
      background-color: $checkboxBackgroundColorForOFF;
    }
  }
}