05月04, 2016

【CSS-05】switch 效果

switch 效果

https://proto.io/freebies/onoff/ 工作需要接触到了check box的效果展示,发现了一个可以自定义效果直接生成html和css的网站,共享如下,可以选择ios风格,windows风格或者android风格,非常简单友好,适合着急时候可以马上获取样式的小伙伴们。链接如下:

这里写图片描述

下面的内容是想要自己写一个这样的switch button的步骤:

原理

其本质是一个check box,原理是将check box隐藏,用一个label for标签设定开关背景样式,label:before来设置开关按钮样式。当点击check box时,给label和label:before来增加样式。

结果展示

See the Pen qZLEZm by Fiona (@fiona2016) on CodePen.

步骤讲解

  1. 知道label for的意义:
  <input type="checkbox" class="switch-checkbox" id="myswitchcheckbox" checked>
  <label for="myswitchcheckbox" id="myswitchlabel" class="switch-label"/>
上面的label与checkbox关联,注意是用**id**进行关联的。
  1. 当checkbox 的状态是unchecked,和checked的时候,分别设置不同的样式。首先是 unchecked的样式。
     .switch-label{
  background:$color-unchecked-background;
  width:$width - $border-width * 2;
  height:$height - $border-width * 2;
  border:$border-width solid $color-unchecked-border;
  border-radius:$height;
  display:block;
  transition:all 0.3s ease-in;
}
.switch-label:before{
  content:"";
  display:block;
  background-color:$color-unchecked-background;
  width:$height - $border-width * 2;
  height:$height - $border-width * 2;
  border-radius:$height - $border-width * 2;
  line-height:$height - $border-width * 2;
  position:absolute;
  top:0;
  left:-$border-width;
  border:$border-width solid $color-unchecked-border;
  transition: all 0.3s ease-in 0s;
}

3.设置checked状态下的label样式。

  //当被选择时,外边框的颜色改变
  .switch-checkbox:checked + .switch-label,.switch-checkbox:checked + .switch-label:before{
  border-color:$color-checked-border;
}
//开关边框的颜色改变
.switch-checkbox:checked + .switch-label:before{
  left:$height;
}
//开关背景的颜色改变
.switch-checkbox:checked + .switch-label{
  background-color:$color-checked-background;
}

本文链接:http://fengbaiyang.cn/post/css-05.html

-- EOF --

Comments

暂不支持评论,如有问题,请发邮件至baiyang.feng@outlook.com。 望不吝赐教~