.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>