你见过吗？9款超炫的复选框（Checkbox）效果

2024-04-27 14:35:37

字体：大中小

来源：转载

供稿：网友

　　复选框（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 {  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;}

源码下载在线演示

您可能感兴趣的相关文章