div+css实现立体质感checkbox开关效果代码-html代码-BFW代码库

div+css实现立体质感checkbox开关效果代码

代码语言：html

代码描述：div+css实现立体质感checkbox开关效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

     <style>
    * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


.toggle-border {
    margin: 100px auto;
    width: 60px;
 border: 2px solid #f0ebeb;
 border-radius: 130px;
 margin-bottom: 45px;
 padding: 1px 2px;
 background: linear-gradient(to bottom right, white, rgba(220,220,220,.5)), white;
 box-shadow: 0 0 0 2px #fbfbfb;
 cursor: pointer;
 display: flex;
 align-items: center;
}

.toggle-border:last-child {
 margin-bottom: 0;
}

.toggle-border input[type="checkbox"] {
 display: none;
}

.toggle-border label {
 position: relative;
 display: inline-block;
 width: 65px;
 height: 20px;
 background: #d13613;
 border-radius: 80px;
 cursor: pointer;
 box-shadow: inset 0 0 16px rgba(0,0,0,.3);
 transition: background .5s;
}

.toggle-bo.........完整代码请登录后点击上方下载按钮下载查看