你见过吗?9款超炫的复选框(Checkbox)效果

  复选框(Checkbox)在各个浏览器中的效果不一致,因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能。下面就给大家分享9款超炫的复选框(Checkbox)效果,纯 CSS3 实现,未使用任何图片。

  温馨提示:为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。

 

你见过吗?9款超炫的复选框(Checkbox)效果

 

  前面三款效果都是灵感来自移动应用程序的滑动选择框效果,在选择和未选择状态之间通过滑动来切换效果,非常的动感。效果的实现方面是借用了一个 DIV 标签和一个 Label 标签,下面是效果一的 HTML 代码示例:

  <section title=".slideOne">      <div class="slideOne">          <input type="checkbox" value="None" id="slideOne" name="check" checked />        <label for="slideOne"></label>      </div>    </section>

  为了实现圆角和复选框的立体感效果,这里运用了 CSS3 的圆角(border-radius)、盒阴影(box-shadow)、渐变(linear-gradient)以及 CSS3 动画技术。下面是效果一的 CSS 代码示例:

.slideOne {    width: 50px;    height: 10px;    background: #333;    margin: 20px auto;    position: relative;    -moz-border-radius: 50px;    -webkit-border-radius: 50px;    border-radius: 50px;    -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);    -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);  }  .slideOne label {    display: block;    width: 16px;    height: 16px;    position: absolute;    top: -3px;    left: -3px;    cursor: pointer;    background: #fcfff4;    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);    background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);    -moz-border-radius: 50px;    -webkit-border-radius: 50px;    border-radius: 50px;    -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);    -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);    -moz-transition: all 0.4s ease;    -o-transition: all 0.4s ease;    -webkit-transition: all 0.4s ease;    transition: all 0.4s ease;  }  .slideOne input[type=checkbox] {    visibility: hidden;  }  .slideOne input[type=checkbox]:checked + label {    left: 37px;  }  

  后面六款效果的交互是我们常见的,使用 CSS3 对浏览器默认的复选框效果进行了美化,并且在各个浏览器中表现一致。HTML 代码都是类似的,这里例举效果五的代码:

<section title=".roundedTwo">      <!-- .roundedTwo -->      <div class="roundedTwo">        <input type="checkbox" value="None" id="roundedTwo" name="check" checked />        <label for="roundedTwo"></label>      </div>      <!-- end .roundedTwo -->  </section>  

  CSS 代码如下:

.roundedTwo label {    width: 20px;    height: 20px;    position: absolute;    top: 4px;    left: 4px;    cursor: pointer;    background: -moz-linear-gradient(top, #222222 0%, #45484d 100%);    background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);    background: linear-gradient(to bottom, #222222 0%, #45484d 100%);    -moz-border-radius: 50px;    -webkit-border-radius: 50px;    border-radius: 50px;    -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;    -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;  }  .roundedTwo label:after {    content: '';    width: 9px;    height: 5px;    position: absolute;    top: 5px;    left: 4px;    border: 3px solid #fcfff4;    border-top: none;    border-right: none;    background: transparent;    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);    opacity: 0;    -moz-transform: rotate(-45deg);    -ms-transform: rotate(-45deg);    -webkit-transform: rotate(-45deg);    transform: rotate(-45deg);  }  .roundedTwo label:hover::after {    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);    opacity: 0.3;  }  .roundedTwo input[type=checkbox] {    visibility: hidden;  }  .roundedTwo input[type=checkbox]:checked + label:after {    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);    opacity: 1;  }  

  

源码下载      在线演示

 

 

本文链接:你见过吗?9款超炫的复选框(Checkbox)效果

编译来源:前端里 ◆ 关注前端开发技术 ◆ 分享网页设计资源

赞 (0) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏