CSS 中的真实切换按钮

怼烎@ 2023-10-14 14:30 55阅读 0赞

CSS 中的真实切换按钮

![在这里插入图片描述][73e7e81dbc4544d48b2b76e82fe0ae0c.gif_pic_center]

CSS 中的真实切换按钮

HTML 代码

CSS代码

#switch {
        
      visibility: hidden;
      clip: rect(0 0 0 0);
      position: absolute;
      left: 9999px;
    }
    
    .switch {
        
      display: block;
      width: 130px;
      height: 60px;
      margin: 70px auto;
      position: relative;
      background: #ced8da;
      background: linear-gradient(left,  #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ced8da', endColorstr='#b7bfc2',GradientType=1 );
      transition: all 0.2s ease-out;
      cursor: pointer;
      border-radius: 0.35em;
      box-shadow: 0 0 1px 2px rgba(0,0,0,0.7),
        inset 0 2px 0 rgba(255,255,255,0.6),
        inset 0 -1px 0 1px rgba(0,0,0,0.3),
        0 8px 10px rgba(0,0,0,0.15);
    }
    
    /* Visit https://democoding.in/ for more free css animation */
    
    .switch:before {
        
      display: block;
      position: absolute;
      left: -35px;
      right: -35px;
      top: -25px;
      bottom: -25px;
      z-index: -2;
      content: "";
      border-radius: 0.4em;
      background: #d5dde0;
      background: linear-gradient(#d7dfe2, #bcc7cd);
      box-shadow: inset 0 2px 0 rgba(255,255,255,0.6),
        inset 0 -1px 1px 1px rgba(0,0,0,0.3),
        0 0 8px 2px rgba(0,0,0,0.2),
        0 2px 4px 2px rgba(0,0,0,0.1);
      pointer-events: none;
      transition: all 0.2s ease-out;
    }
    
    .switch:after {
        
      content: "";
      position: absolute;
      right: -25px;
      top: 50%;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #788b91;
      margin-top: -8px;
      z-index: -1;
      box-shadow: inset 0 -1px 8px rgba(0,0,0,0.7),
        inset 0 -2px 2px rgba(0,0,0,0.2),
        0 1px 0 white,
        0 -1px 0 rgba(0,0,0,0.5),
        -47px 32px 15px 13px rgba(0,0,0,0.25);
    }
    
    #switch:checked ~ .switch {
        
      background: #b7bfc2;
      background: linear-gradient(to right, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7bfc2', endColorstr='#ced8da',GradientType=1 );
    }
    
    #switch:checked ~ .switch:after {
        
      background: #b1ffff;
      box-shadow: inset 0 -1px 8px rgba(0,0,0,0.7),
        inset 0 -2px 2px rgba(0,0,0,0.2),
        0 1px 0 white,
        0 -1px 0 rgba(0,0,0,0.5),
        -110px 32px 15px 13px rgba(0,0,0,0.25);
    }

### 感谢您的阅读❤️！ ###

[73e7e81dbc4544d48b2b76e82fe0ae0c.gif_pic_center]: https://img-blog.csdnimg.cn/73e7e81dbc4544d48b2b76e82fe0ae0c.gif#pic_center