你见过吗?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= "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= "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 ; } |
您可能感兴趣的相关文章
作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
2011-04-21 分享25个好玩的 JavaScript 小游戏
2011-04-21 30个使用大自然元素设计的 Logo 欣赏
2011-04-21 CSDN发布2011程序员薪资调查报告
2011-04-21 分享最新36款高质量免费英文字体
2011-04-21 分享5款精美的WordPress免费主题