css实现svg开关checkbox美化效果代码-html代码-BFW代码库

css实现svg开关checkbox美化效果代码

代码语言：html

代码描述：css实现svg开关checkbox美化效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
body{background-color:#eee;padding-top:40px}h1{text-align:center;font-size:20px;text-transform:uppercase;letter-spacing:1.2px}h2{text-align:center;font-size:14px;text-transform:uppercase;letter-spacing:1.2px}hr{margin:0 auto;margin-top:50px;margin-bottom:50px}footer{text-align:center;padding-bottom:50px}.link{text-align:center;color:#278fb2}.ext-cross:before,.checkbox__checker:before,.checkbox__cross:before,.checkbox__ok:before,.ext-cross:after,.checkbox__checker:after,.checkbox__cross:after,.checkbox__ok:after{content:"";display:block;position:absolute;width:14px;height:2px;margin:0 auto;top:20px;left:0;right:0;background-color:#bf1e1e;border-radius:5px;transition-duration:.3s}.ext-cross:before,.checkbox__checker:before,.checkbox__cross:before,.checkbox__ok:before{transform:rotateZ(45deg)}.ext-cross:after,.checkbox__checker:after,.checkbox__cross:after,.checkbox__ok:after{transform:rotateZ(-45deg)}.ext-ok:before,.checkbox__ok:before,.checkbox__toggle:checked+.checkbox__checker:before,.ext-ok:after,.checkbox__ok:after,.checkbox__toggle:checked+.checkbox__checker:after{background-color:#0cb018}.ext-ok:before,.checkbox__ok:before,.checkbox__toggle:checked+.checkbox__checker:before{width:6px;top:23px;left:-7px}.ext-ok:after,.checkbox__ok:after,.checkbox__toggle:checked+.checkbox__checker:after{width:12px;left:5px}.checkbox{width:100px;margin:0 auto 30px auto}.checkbox__container{display:block;position:relative;height:42px;cursor:pointer}.checkbox__toggle{display:none}.checkbox__toggle:checked+.checkbox__checker{left:calc(100% - 43px);transform:rotateZ(360deg)}.checkbox__checker,.checkbox__cross,.checkbox__ok{display:block;position:absolute;height:43px;width:43px;top:-1px;left:0;z-index:1}.checkbox__checker{border-radius:50%;background-color:#fff;box-shadow:0 2px 6px rgba(0,0,0,0.5);transition:.3s;z-index:2}.checkbox__checker:before,.checkbox__checker:after{transition-duration:.3s}.checkbox__cross:before,.checkbox__cross:after,.checkbox__ok:before,.checkbox__ok:after{b.........完整代码请登录后点击上方下载按钮下载查看