css实现特别有质感不锈钢checkbox开关效果代码-html代码-BFW代码库

css实现特别有质感不锈钢checkbox开关效果代码

代码语言：html

代码描述：css实现特别有质感不锈钢checkbox开关效果代码

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

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>
        body {
    
    }
    
    .toggles {
       width: 300px;
       margin: 127px auto;
       background: 1px solid black;
    }
    
    .toggle-border {
       width: 300px;
       height: 80px;
       border: 2px solid #f0ebeb;
       border-radius: 130px;
       margin-bottom: 45px;
       padding: 25px;
       background: linear-gradient(to bottom right, white, rgba(220,220,220,.5)), white;
       box-shadow: 0 0 0 2px #fbfbfb;
       cursor: pointer;
    }
    
    .toggle-border:last-child {
       margin-bottom: 0;
    }
    
    input[type="checkbox"] {
       display: none;
    }
    
    label {
       position: relative;
       display: inline-block;
       width: 300px;
       height: 80px;
       background: #d13613;
       border-radius: 80px;
       cursor: pointer;
       box-shadow: inset 0 0 16px rgba(0,0,0,.3);
       transition: background .5s;
    }
    
    label:after,
    label:before {
       content: "";
       position: absolute;
       top: 25px;
       left: -100px;
       width: 20px;
       height: 20px;
       border: 2px solid #f0ebeb;
       border-radius: 50%;
       box-shadow: 0 0 0 1px #fbfbfb, inset 1px 3px 6px rgba(0,0,0,.3);
       background: #d13613;
       transition: background .5s;
    }
    
    label:before {
       left: calc(100% + 100px - 20px);
       background: #d1cac9;
    }
    
    input[type="checkbox"]:checked + label {
       background: #13d162;
    }
    
.........完整代码请登录后点击上方下载按钮下载查看