css实现checkbox立体质感物理按键开关效果代码-html代码-BFW代码库

css实现checkbox立体质感物理按键开关效果代码

代码语言：html

代码描述：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>
        .toggle > div {
          position: relative;
          padding: 10px;
          width: 132px;
          height: 59px;
          border-radius: 50px;
          box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, .5), 0px 1px 1px 0 rgba(255, 255, 255, 1);
          background: rgb(189, 191, 193);
          background: linear-gradient(to bottom, rgba(189, 191, 193, 1) 0%, rgba(249, 251, 254, 1) 100%);
        }
        
        .toggle > div > input[type=checkbox] {
          position: absolute;
          opacity: 0;
          top: -3px;
          left: 17px;
          width: 130px;
          height: 55px;
          z-index: 5;
        }
        
        .toggle > div > input[type=checkbox] ~ div {
          width: 130px;
          height: 55px;
          border-radius: 50px;
          border: 1px solid #979797;
          box-shadow: inset 5px 0 0 0 rgba(0, 0, 0, .1), inset -5px 0 0 0 rgba(0, 0, 0, .1), inset -6px 0 0 0 rgba(255, 255, 255, .5), inset -4px 6px 11px -5px rgba(0, 0, 0, .2), inset 1px 1px 0 0 rgba(255, 255, 255, 1), -6px 4px 11px -7px rgba(0, 0, 0, .5);
          background: rgb(253, 252, 251);
          background: linear-gradient(to right, rgba(253, 252, 251, 1) 37%, rgba(229, 229, 229, 1) 61%);
        }
        
        .toggle > div > input[type=checkbox]:checked ~ div {
          box-shadow: inset -5px 0 0 0 rgba(0, 0, 0, .1), inset 5px 0 0 0 rgba(0, 0, 0, .1), inset 6px 0 0 0 rgba(255, 255, 255, .5), inset -4px 6px 11px -5px rgba(0, 0, 0, .2), inset 1px 1px 0 0 rgba(255, 255, 255, 1), -6px 4px 11px -7px .........完整代码请登录后点击上方下载按钮下载查看