CSS3模拟IOS滑动开关效果

2020-05-06 09:13:45易采站长站整理

            transform:translateZ(0);   
            -webkit-transition: all .3s ease;     
            transition: all .3s ease;   
        }   
  
        .emulate-ios-button:active:after {   
            width: 1.1rem;   
        }   
  
      /* ==========================================================================   
                    设置raw-checkbox,视觉直观比较    
       ========================================================================== */   
        .raw-checkbox{   
            height:2rem;   
            width:2rem;   
        }   
  
        .raw-checkbox:checked+label {   
            background: #34bf49;   
        }   
  
        /* 这里是伪元素偏移,初始是0.9+0.05 ,所以这里1.05rem */   
        .raw-checkbox:checked+label:after {   
            left: 1.05rem;   
        }   
  
        .raw-checkbox:checked+label:active:after {   
            left: .5rem;   
        }   
  
  
        .raw-checkbox:disabled+label {   
            background: #d5d5d5;   
            pointer-events: none;   
        }