前言
大家都知道checkbox是在html中让使用者与首页上的素材发生交互作用的一种方法。所谓checkbox控件就是我们一般所说的复选框，通常用于某选项的打开或关闭。最近在工作中遇到一个需求，需要自定义checkbox的样式，最终实现了好几种样式，所以想着分享出来给大家，有需要的朋友们可以参考学习，下面话不多说，来看看详细的介绍吧。
效果图如下
实例代码
<!doctype html><html><head> <meta chart="utf-8"> <title>css3自定义checkbox特效</title></head><style type="text/css">.tgl{display:none}.tgl,.tgl *,.tgl :after,.tgl :before,.tgl+.tgl-btn,.tgl:after,.tgl:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.tgl ::-moz-lection,.tgl :after::-moz-lection,.tgl :before::-moz-lection,.tgl+.tgl-btn::-moz-lection,.tgl::-moz-lection,.tgl:after::-moz-lection,.tgl:before::-moz-lection{background:0 0}.tgl ::lection,.tgl :after::lection,.tgl :before::lection,.tgl+.tgl-btn::lection,.tgl::lection,.tgl:after::lection,.tgl:before::lection{background:0 0}.tgl+.tgl-btn{outline:0;display:block;width:4em;height:2em;position:relative;cursor:pointer}.tgl+.tgl-btn:after,.tgl+.tgl-btn:before{position:relative;display:block;content:"";width:50%;height:100%}.tgl+.tgl-btn:after{left:0}.tgl+.tgl-btn:before{display:none}.tgl:checked+.tgl-btn:after{left:50%}.tgl-light+.tgl-btn{background:#f0f0f0;border-radius:2em;padding:2px;-webkit-transition:all .4s ea;transition:all .4s ea}.tgl-light+.tgl-btn:after{border-radius:50%;background:#fff;-webkit-transition:all .2s ea;transition:all .2s ea}.tgl-light:checked+.tgl-btn{background:#9fd6ae}.tgl-ios+.tgl-btn{background:#fbfbfb;border-radius:2em;padding:2px;-webkit-transition:all .4s ea;transition:all .4s ea;border:1px solid #e8eae9}.tgl-ios+.tgl-btn:after{border-radius:2em;background:#fbfbfb;-webkit-transition:left .3s cubic-bezier(.175,.885,.32,1.275),padding .3s ea,margin .3s ea;transition:left .3s cubic-bezier(.175,.885,.32,1.275),padding .3s ea,margin .3s ea;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1),0 4px 0 rgba(0,0,0,.08);box-shadow:0 0 0 1px rgba(0,0,0,.1),0 4px 0 rgba(0,0,0,.08)}.tgl-ios+.tgl-btn:active{-webkit-box-shadow:int 0 0 0 2em #e8eae9;box-shadow:int 0 0 0 2em #e8eae9}.tgl-ios+.tgl-btn:active:after{padding-right:.8em}.tgl-ios:checked+.tgl-btn{background:#86d993}.tgl-ios:checked+.tgl-btn:active{-webkit-box-shadow:none;box-shadow:none}.tgl-ios:checked+.tgl-btn:active:after{margin-left:-.8em}.tgl-skewed+.tgl-btn{overflow:hidden;-webkit-transform:skew(-10deg);-ms-transform:skew(-10deg);transform:skew(-10deg);-webkit-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:all .2s ea;transition:all .2s ea;font-family:sans-rif;background:#888}.tgl-skewed+.tgl-btn:after,.tgl-skewed+.tgl-btn:before{-webkit-transform:skew(10deg);-ms-transform:skew(10deg);transform:skew(10deg);display:inline-block;-webkit-transition:all .2s ea;transition:all .2s ea;width:100%;text-align:center;position:absolute;line-height:2em;font-weight:700;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.4)}.tgl-skewed+.tgl-btn:after{left:100%;content:attr(data-tg-on)}.tgl-skewed+.tgl-btn:before{left:0;content:attr(data-tg-off)}.tgl-skewed+.tgl-btn:active{background:#石塘竹海888}.tgl-skewed+.tgl-btn:active:before{left:-10%}.tgl-skewed:checked+.tgl-btn{background:#86d993}.tgl-skewed:checked+.tgl-btn:before{left:-100%}.tgl-skewed:checked+.tgl-btn:after{left:0}.tgl-skewed:checked+.tgl-btn:active:after{left:10%}.tgl-flat+.tgl-btn{padding:2px;-webkit-transition:all .2s ea;transition:all .2s ea;background:#fff;border:4px solid #f2f2f2;border-radius:2em}.tgl-flat+.tgl-btn:after{-webkit-transition:all .2s ea;transiti精开头的成语on:all .2s ea;background:#f2f2f2;content:"";border-radius:1em}.tgl-flat:checked+.tgl-btn{border:4px solid #7fc6a6}.tgl-flat:checked+.tgl-btn:after{left:50%;background:#7fc6a6}.tgl-flip+.tgl-btn{padding:2px;-webkit-transition:all .2s ea;transition:all .2s ea;font-family:sans-rif;-webkit-perspective:100px;-ms-perspective:100px;perspective:100px}.tgl-flip+.tgl-btn:after,.tgl-flip+.tgl-btn:before{display:inline-block;-webkit-transition:all .4s ea;transition:all .4s ea;width:100%;text-align:center;posi物主代词的用法tion:absolute;line-height:2em;font-weight:700;color:#fff;position:absolute;top:0;left:0;-webkit-backf圣诞节的习俗ace-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;border-radius:4px}.tgl-flip+.tgl-btn:after{content:attr(data-tg-on);background:#02c66f;-webkit-transform:rotatey(-180deg);-ms-transform:rotatey(-180deg);transform:rotatey(-180deg)}.tgl-flip+.tgl-btn:before{background:#ff3a19;content:attr(data-tg-off)}.tgl-flip+.tgl-btn:active:before{-webkit-transform:rotatey(-20deg);-ms-transform:rotatey(-20deg);transform:rotatey(-20deg)}.tgl-flip:checked+.tgl-btn:before{-webkit-transform:rotatey(180deg);-ms-transform:rotatey(180deg);transform:rotatey(180deg)}.tgl-flip:checked+.tgl-btn:after{-webkit-transform:rotatey(0);-ms-transform:rotatey(0);transform:rotatey(0);left:0;background:#7fc6a6}.tgl-flip:checked+.tgl-btn:active:after{-webkit-transform:rotatey(20deg);-ms-transform:rotatey(20deg);transform:rotatey(20deg)}</style><body> <span class='tg-list-item'> <input class='tgl tgl-light' id='cb1' type='checkbox'> <label class='tgl-btn' for='cb1'></label> </span> <span class='tg-list-item'> <input class='tgl tgl-ios' id='cb2' type='checkbox'> <label class='tgl-btn' for='cb2'></label> </span> <span class='tg-list-item'> <input class='tgl tgl-skewed' id='cb3' type='checkbox'> <label class='tgl-btn' data-tg-off='off' data-tg-on='on' for='cb3'></label> </span> <span class='tg-list-item'> <input class='tgl tgl-flat' id='cb4' type='checkbox'> <label c策划模板lass='tgl-btn' for='cb4'></label> </span> <span class='tg-list-item'> <input class='tgl tgl-flip' id='cb5' type='checkbox'> <label class='tgl-btn' data-tg-off='nope' data-tg-on='yeah!' for='cb5'></label> </span></body></html>总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对www.887551.com的支持。
本文发布于:2023-04-06 22:03:01，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/8b3130c4f73dc38eab5e45430e41849c.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：CSS3实现自定义Checkbox特效实例代码.doc
本文 PDF 下载地址：CSS3实现自定义Checkbox特效实例代码.pdf
| 留言与评论（共有 0 条评论） |
