网站开发多少钱一天是,网站开发业务流程图,做网站的费用计入销售费用吗,中国十大网站有哪些复选框#xff08;Checkbox#xff09;在各个浏览器中的效果不一致#xff0c;因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能。下面就给大家分享9款超炫的复选框#xff08;Checkbox#xff09;效果#xff0c;纯 CSS3 实现#xff0c;未使… 复选框Checkbox在各个浏览器中的效果不一致因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能。下面就给大家分享9款超炫的复选框Checkbox效果纯 CSS3 实现未使用任何图片。 温馨提示为保证最佳的效果请在 IE10 、Chrome、Firefox 和 Safari 等现代浏览器中浏览。 前面三款效果都是灵感来自移动应用程序的滑动选择框效果在选择和未选择状态之间通过滑动来切换效果非常的动感。效果的实现方面是借用了一个 DIV 标签和一个 Label 标签下面是效果一的 HTML 代码示例 section title.slideOne
div classslideOne
input typecheckbox valueNone idslideOne namecheck checked /
label forslideOne/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[typecheckbox] {
visibility: hidden;
}
.slideOne input[typecheckbox]:checked label {
left: 37px;
}
后面六款效果的交互是我们常见的使用 CSS3 对浏览器默认的复选框效果进行了美化并且在各个浏览器中表现一致。HTML 代码都是类似的这里例举效果五的代码 section title.roundedTwo
!-- .roundedTwo --
div classroundedTwo
input typecheckbox valueNone idroundedTwo namecheck checked /
label forroundedTwo/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(Opacity0);
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(Opacity30);
opacity: 0.3;
}
.roundedTwo input[typecheckbox] {
visibility: hidden;
}
.roundedTwo input[typecheckbox]:checked label:after {
filter: progid:DXImageTransform.Microsoft.Alpha(enabledfalse);
opacity: 1;
}
源码下载 在线演示 您可能感兴趣的相关文章 期待已久的2013年度最佳 jQuery 插件揭晓赞史上最全的浏览器 CSS JS Hack 手册10大流行的 Metro UI 风格 Bootstrap 主题推荐35款精致的 CSS3 和 HTML5 网页模板精选12款优秀 jQuery Ajax 分页插件和教程 本文链接你见过吗9款超炫的复选框Checkbox效果
编译来源梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
更多专业前端知识请上
【猿2048】www.mk2048.com
