首页 > 代码库 > 你见过吗?9款超炫的复选框(Checkbox)效果
你见过吗?9款超炫的复选框(Checkbox)效果
复选框(Checkbox)在各个浏览器中的效果不一致,因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能。下面就给大家分享9款超炫的复选框(Checkbox)效果,纯 CSS3 实现,未使用任何图片。
温馨提示:为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。
前面三款效果都是灵感来自移动应用程序的滑动选择框效果,在选择和未选择状态之间通过滑动来切换效果,非常的动感。效果的实现方面是借用了一个 DIV 标签和一个 Label 标签,下面是效果一的 HTML 代码示例:
1 2 3 4 5 6 | <section title= ".slideOne" > <div class= "slideOne" > <input type= "checkbox" value=http://www.mamicode.com/ "None" id= "slideOne" name= "check" checked /> <label for= "slideOne" ></label> </div> </section> |
为了实现圆角和复选框的立体感效果,这里运用了 CSS3 的圆角(border-radius)、盒阴影(box-shadow)、渐变(linear-gradient)以及 CSS3 动画技术。下面是效果一的 CSS 代码示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | .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.4 s ease; -o-transition: all 0.4 s ease; -webkit-transition: all 0.4 s ease; transition: all 0.4 s ease; } .slideOne input[type=checkbox] { visibility : hidden ; } .slideOne input[type=checkbox]:checked + label { left : 37px ; } |
后面六款效果的交互是我们常见的,使用 CSS3 对浏览器默认的复选框效果进行了美化,并且在各个浏览器中表现一致。HTML 代码都是类似的,这里例举效果五的代码:
1 2 3 4 5 6 7 8 | <section title= ".roundedTwo" > <!-- .roundedTwo --> <div class= "roundedTwo" > <input type= "checkbox" value=http://www.mamicode.com/ "None" id= "roundedTwo" name= "check" checked /> <label for= "roundedTwo" ></label> </div> <!-- end .roundedTwo --> </section> |
CSS 代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | .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( -45 deg); -ms-transform: rotate( -45 deg); -webkit-transform: rotate( -45 deg); transform: rotate( -45 deg); } .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)效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。