CSS3实现自定义Checkbox特效实例代码
建站知识 2021-07-03 08:16www.168986.cn长沙网站建设
前言
大家都知道CheckBox是在HTML中让使用者与首页上的素材发生交互作用的一种方法。所谓CheckBox控件就是我们一般所说的复选框,通常用于某选项的打开或关闭。最近在工作中遇到一个需求,需要自定义checkbox的样式,最终实现了好几种样式,所以想着分享出来给大家,有需要的朋友们可以参考学习,狼蚁网站SEO优化话不多说,来看看详细的介绍吧。
效果图如下
实例代码
<!DOCTYPE html> <html> <head> <meta charset="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-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:0 0} .tgl ::selection,.tgl :after::selection,.tgl :before::selection,.tgl+.tgl-btn::selection,.tgl::selection,.tgl:after::selection,.tgl:before::selection{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 ease;transition:all .4s ease} .tgl-light+.tgl-btn:after{border-radius:50%;background:#fff;-webkit-transition:all .2s ease;transition:all .2s ease} .tgl-light:checked+.tgl-btn{background:#9FD6AE} .tgl-ios+.tgl-btn{background:#fbfbfb;border-radius:2em;padding:2px;-webkit-transition:all .4s ease;transition:all .4s ease;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 ease,margin .3s ease;transition:left .3s cubic-bezier(.175,.885,.32,1.275),padding .3s ease,margin .3s ease;-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:inset 0 0 0 2em #e8eae9;box-shadow:inset 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 ease;transition:all .2s ease;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 .2s ease;transition:all .2s ease;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 ease;transition:all .2s ease;background:#fff;border:4px solid #f2f2f2;border-radius:2em} .tgl-flat+.tgl-btn:after{-webkit-transition:all .2s ease;transition:all .2s ease;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 ease;transition:all .2s ease;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 .4s ease;transition:all .4s ease;width:100%;text-align:center;position:absolute;line-height:2em;font-weight:700;color:#fff;position:absolute;: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> <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 class='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>
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对狼蚁SEO的支持。
长沙网站设计
- 如何进行东阳SEO关键词优化?
- 边坝哪有关键词排名优化:提升你的网站流量与
- 安国百度优化服务:提升您的在线可见性
- 阜康新手做SEO怎么做
- 山西seo网站排名关键词优化:提升您网站曝光率
- 临沂seo网站排名关键词优化:提高你的网站可见
- 广西SEO网站推广怎样付费比较合理
- 双辽SEO网站推广:提升你的网站可见性与流量
- 辽宁企业网站优化购买方式有哪些
- 提升宝清百度SEO排名的实用技巧与策略
- 静宁百度SEO排名:提升您网站曝光率的关键策略
- 彭州百度SEO排名的提升策略和实施指南
- 广南百度关键词SEO:提升网站排名的关键策略
- 辽宁关键词优化怎么做论坛营销
- 吉林百度seo排名如何做到让用户满意
- 内黄百度优化服务:提升在线可见性的关键