zoukankan      html  css  js  c++  java
  • 你见过吗?9款超炫的复选框(Checkbox)效果

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

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

      前面三款效果都是灵感来自移动应用程序的滑动选择框效果,在选择和未选择状态之间通过滑动来切换效果,非常的动感。效果的实现方面是借用了一个 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 {
       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;
       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 {
       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: '';
       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)效果

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

  • 相关阅读:
    「NOIP 2017」列队
    java基础-略知一二
    重磅发布!阿里云推PostgreSQL 10 高可用版
    双11奇迹背后的大数据平台,不喧哗,自有声!
    深度解析双十一背后的阿里云 Redis 服务
    双11大考 POLARDB分钟级弹性让企业轻松扩展
    双十一流量洪峰 支撑阿里核心业务的云数据库揭秘
    双十一高并发场景背后的数据库RDS技术揭秘
    直击KubeCon 2018 |云原生正在改变你的衣食住行
    一文带你领略虚拟化领域顶级技术会议KVM Forum 2018
  • 原文地址:https://www.cnblogs.com/lhb25/p/9-amazing-checkbox-effect.html
Copyright © 2011-2022 走看看