.wrap {
width:2.625rem;
height:1.25rem;
}
input {
display:none;
}
label {
display:block;
border:1px solid #888;
height:1.25rem;
border-radius:15px;
transition:.3s;
}
label .move {
display:block;
width:1.25rem;
height:1.25rem;
border-radius:50%;
box-shadow:1px 1px 1px #ccc;
background:#fff;
transition:.3s;
overflow:hidden;
}
input:checked+label {
background:#0092EB;
}
input:checked+label .move {
transform:translateX(20px);
box-shadow:none;
}
.move span {
width:2.5rem;
display:block;
height:1.25rem;
line-height:1.25rem;
transition:0.3s;
}
input:checked+label .move span {
transform:translateX(-20px);
}
em {
text-align:center;
width:50%;
font-size:12px;
font-style:normal;
float:left;
}
1:transform 属性向元素应用 2d 或 3d 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
<table border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0" wangeditor_table_border_mark="1"> <tbody> <tr> <td>translatex(x)</td> <td>定义转换,只是用 x 轴的值。</td> </tr> </tbody> </table> <table border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0" wangeditor_table_border_mark="1"> <tbody> <tr> <td>translatey(y)</td> <td>定义转换,只是用 y 轴的值。</td> </tr> </tbody> </table>