样式(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;
    }
  }
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • preview demo预览 description 1.可自定义:按钮大小 : checkboxSize,支持 ...
    卡拉咖啦阅读 282评论 0 0
  • 一、html5新特性 1.增加了一个专门用于绘画的元素canvas 2.增加了用于媒体播放的音频和视频元素 3.增...
    空谷悠阅读 617评论 0 2
  • 关于html静态页面书写的知识点整理 1.web标准:结构,表现,行为 结构(xhtm...
    终相恋阅读 620评论 0 1
  • @(概述)[基本概念|百分比|rem|vw/vh|响应式设计] 移动端web页面的开发,由于手机屏幕尺寸、分辨率不...
    jluemmmm阅读 77,599评论 1 42
  • 荆州是荆楚文化的发祥之地,可与古希腊古罗马相媲美。这次出差至荆州,终于寻得机会探访了荆州古城。 行至东门城楼下车,...
    陶语阅读 690评论 14 8