css3 手机开关按钮 transition gradient

Css：

div { 
            width: 100px;
            margin: 0 auto;
        }
        .onoff { 
            display: inline-block;
            position: relative;
            width: 60px; 
            height: 20px; 
            overflow: hidden;
            border-radius: 10px; 
            border: 1px solid #909090; 
        }
        .onoff label {
            display: inline-block;
            position: relative;
            width: 100px;
            height: 20px;
            background-image: -webkit-linear-gradient(top, #fe7e02, #fea651);
            cursor: pointer;
        }
        .onoff label:before {
            content: "";
            display: inline-block;
            width: 2px;
            height: 10px;
            position: absolute;
            left: 22px;
            margin-top: 5px;
            overflow: hidden;
            background: #fff;
        }
        .onoff label:after {
            position: relative;
            z-index: 1;
            content: "";
            display: inline-block;
            margin-left: 39px;
            margin-top: -1px;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            border: 1px solid #909090;
            background-image: -webkit-linear-gradient(top, #ddd, #fff); 
        }
        .onoff i {
            display: inline-block;
            position: absolute;
            z-index: 0;
            right: 0;
            top: 0px;
            width: 50px;
            height: 20px;
            background-image: -webkit-linear-gradient(top, #ddd, #fff);
        }
        .onoff i:after {
            content: "";
            display: inline-block;
            width: 8px;
            height: 8px;
            margin-left: 23px;
            border-radius: 5px;
            border: 1px solid #909090;
        }
        .onoff label {
            -webkit-transition: all .5s ease-out;
        }
        .onoff:hover label{
            margin-left: -40px;
        }

Html：

<div><span class="onoff"><label><i></i></label></span></div>

 截图：

 

转载于:https://www.cnblogs.com/do-it/p/4506273.html