样式(9) -- checkbox9

preview

demo预览

checkbox9

description

通过放大缩小图片起到视觉上类似“跳动”的效果。
分别定义 checkbox 切换的动画，点击按钮的时候修改动画就可以了

scss

/* html

    
    
      

    

*/

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

body {
  margin: 60px;
  background-color: #eee;
}

$checkboxSize: 2em;
$checkboxWidthTimes: 3;
$checkboxFontSizeTimes: 0.6;
$checkboxFontSize: $checkboxSize * $checkboxFontSizeTimes;
$checkboxWidth: $checkboxSize * $checkboxWidthTimes;
$checkboxBackgroundColorForOFF: tomato;
$checkboxBackgroundColorForON: limegreen;
$checkboxTextForOFF: "OFF";
$checkboxTextForON: "ON";
$toggleSpeed: 0.5s;

@keyframes growForOFF {
  0% {transform: translateX(0);}
  50% {transform: translateX(50%) scale(2);}
  100% {transform: translateX(100%);}
}
@keyframes growForON {
  0% {transform: translateX(100%);}
  50% {transform: translateX(50%) scale(2);}
  100% {transform: translateX(0);}
}

.checkboxWrapper {
  display: block;
  width: $checkboxWidth;
  height: $checkboxSize;
  line-height: $checkboxSize;

  & label{
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: relative;

    & .growCard, &::before, &::after {
      position: absolute;
      height: 100%;
      width:  50%;
      text-align: center;
    }

    &::before, &::after {
      content: $checkboxTextForON;
      font-size: $checkboxFontSize;
    }
    &::before {
      left: 0;
    }
    &::after {
      right: 0;
      content: $checkboxTextForOFF;
    }

    & .growCard {
      background-color: $checkboxBackgroundColorForOFF;
      z-index: 1;
      left: 0;
      transition: all $toggleSpeed ease;
      animation: growForON $toggleSpeed both;
    }
  }


  & input {
    display: none;

    &:checked + label .growCard {
      animation: growForOFF $toggleSpeed both;
      background-color: $checkboxBackgroundColorForON;
    }
  }
}

素材参考：https://codepen.io/bennettfeely/pen/LKjmA