复选框(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; }
您可能感兴趣的相关文章