CSS3中怎么自定义Checkbox特效
导读：本文共3582字符，通常情况下阅读需要12分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 效果图如下实例代码<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>CSS3自定义Checkbox特效</title></head><styletype="text/css&... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。效果图如下
实例代码
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>CSS3自定义Checkbox特效</title></head><styletype="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-selection,.tgl:after::-moz-selection,.tgl:before::-moz-selection,.tgl+.tgl-btn::-moz-selection,.tgl::-moz-selection,.tgl:after::-moz-selection,.tgl:before::-moz-selection{background:00}.tgl::selection,.tgl:after::selection,.tgl:before::selection,.tgl+.tgl-btn::selection,.tgl::selection,.tgl:after::selection,.tgl:before::selection{background:00}.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.4sease;transition:all.4sease}.tgl-light+.tgl-btn:after{border-radius:50%;background:#fff;-webkit-transition:all.2sease;transition:all.2sease}.tgl-light:checked+.tgl-btn{background:#9FD6AE}.tgl-ios+.tgl-btn{background:#fbfbfb;border-radius:2em;padding:2px;-webkit-transition:all.4sease;transition:all.4sease;border:1pxsolid#e8eae9}.tgl-ios+.tgl-btn:after{border-radius:2em;background:#fbfbfb;-webkit-transition:left.3scubic-bezier(.175,.885,.32,1.275),padding.3sease,margin.3sease;transition:left.3scubic-bezier(.175,.885,.32,1.275),padding.3sease,margin.3sease;-webkit-box-shadow:0001pxrgba(0,0,0,.1),04px0rgba(0,0,0,.08);box-shadow:0001pxrgba(0,0,0,.1),04px0rgba(0,0,0,.08)}.tgl-ios+.tgl-btn:active{-webkit-box-shadow:inset0002em#e8eae9;box-shadow:inset0002em#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.2sease;transition:all.2sease;font-family:sans-serif;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.2sease;transition:all.2sease;width:100%;text-align:center;position:absolute;line-height:2em;font-weight:700;color:#fff;text-shadow:01px0rgba(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.2sease;transition:all.2sease;background:#fff;border:4pxsolid#f2f2f2;border-radius:2em}.tgl-flat+.tgl-btn:after{-webkit-transition:all.2sease;transition:all.2sease;background:#f2f2f2;content:"";border-radius:1em}.tgl-flat:checked+.tgl-btn{border:4pxsolid#7FC6A6}.tgl-flat:checked+.tgl-btn:after{left:50%;background:#7FC6A6}.tgl-flip+.tgl-btn{padding:2px;-webkit-transition:all.2sease;transition:all.2sease;font-family:sans-serif;-webkit-perspective:100px;-ms-perspective:100px;perspective:100px}.tgl-flip+.tgl-btn:after,.tgl-flip+.tgl-btn:before{display:inline-block;-webkit-transition:all.4sease;transition:all.4sease;width:100%;text-align:center;position:absolute;line-height:2em;font-weight:700;color:#fff;position:absolute;top:0;left:0;-webkit-backface-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><spanclass='tg-list-item'><inputclass='tgltgl-light'id='cb1'type='checkbox'><labelclass='tgl-btn'for='cb1'></label></span><spanclass='tg-list-item'><inputclass='tgltgl-ios'id='cb2'type='checkbox'><labelclass='tgl-btn'for='cb2'></label></span><spanclass='tg-list-item'><inputclass='tgltgl-skewed'id='cb3'type='checkbox'><labelclass='tgl-btn'data-tg-off='OFF'data-tg-on='ON'for='cb3'></label></span><spanclass='tg-list-item'><inputclass='tgltgl-flat'id='cb4'type='checkbox'><labelclass='tgl-btn'for='cb4'></label></span><spanclass='tg-list-item'><inputclass='tgltgl-flip'id='cb5'type='checkbox'><labelclass='tgl-btn'data-tg-off='Nope'data-tg-on='Yeah!'for='cb5'></label></span></body></html>css的三种引入方式
1.行内样式，最直接最简单的一种，直接对HTML标签使用style=""。
2.内嵌样式，就是将CSS代码写在之间，并且用进行声明。
3.外部样式，其中链接样式是使用频率最高，最实用的样式，只需要在之间加上就可以了。其次就是导入样式，导入样式和链接样式比较相似，采用@import样式导入CSS样式表，不建议使用。
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
CSS3中怎么自定义Checkbox特效的详细内容，希望对您有所帮助，信息来源于网络。