3D 拨动开关 CSS 按钮

素颜马尾好姑娘i 2023-10-14 14:31 17阅读 0赞

3D 拨动开关 CSS 按钮

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

HTML 代码

CSS代码

.container {
        
    }
    
    .label {
        
      height: 60px;
      width: 120px;
      background-color: #ffffff;
      border-radius: 30px;
      -webkit-box-shadow: inset 0 0 5px 4px rgba(255, 255, 255, 1),
        inset 0 0 20px 1px rgba(0, 0, 0, 0.488), 10px 20px 30px rgba(0, 0, 0, 0.096),
        inset 0 0 0 3px rgba(0, 0, 0, 0.3);
      box-shadow: inset 0 0 5px 4px rgba(255, 255, 255, 1),
        inset 0 0 20px 1px rgba(0, 0, 0, 0.488), 10px 20px 30px rgba(0, 0, 0, 0.096),
        inset 0 0 0 3px rgba(0, 0, 0, 0.3);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      cursor: pointer;
      position: relative;
      -webkit-transition: -webkit-transform 0.4s;
      transition: -webkit-transform 0.4s;
      transition: transform 0.4s;
    }
    
    /* Visit https://democoding.in/ for more free css animation */
    
    .label:hover {
        
      -webkit-transform: perspective(100px) rotateX(5deg) rotateY(-5deg);
      transform: perspective(100px) rotateX(5deg) rotateY(-5deg);
    }
    
    #checkbox:checked ~ .label:hover {
        
      -webkit-transform: perspective(100px) rotateX(-5deg) rotateY(5deg);
      transform: perspective(100px) rotateX(-5deg) rotateY(5deg);
    }
    
    #checkbox {
        
      display: none;
    }
    
    #checkbox:checked ~ .label::before {
        
      left: 70px;
      background-color: #000000;
      background-image: linear-gradient(315deg, #000000 0%, #414141 70%);
      -webkit-transition: 0.4s;
      transition: 0.4s;
    }
    
    .label::before {
        
      position: absolute;
      content: "";
      height: 40px;
      width: 40px;
      border-radius: 50%;
      background-color: #000000;
      background-image: linear-gradient(
        130deg,
        #757272 10%,
        #ffffff 11%,
        #726f6f 62%
      );
      left: 10px;
      -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3), 10px 10px 10px rgba(0, 0, 0, 0.3);
      box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3), 10px 10px 10px rgba(0, 0, 0, 0.3);
      -webkit-transition: 0.4s;
      transition: 0.4s;
    }

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

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