16.切换开关 & 图像文本叠加

文章预览

切换开关 仅使用 CSS 创建一个切换开关。 使用 for 属性将 与复选框 元素关联。 使用 的 ::after 伪元素为开关创建一个圆形旋钮。 使用 :checked 伪类选择器来改变旋钮的位置,使用 transform: translateX(20px) 和开关的 background-color 。 使用 position: absolute 和 left: -9999px 来在视觉上隐藏 元素。 < input   type = "checkbox"   id = "toggle"   class = "offscreen"  /> < label   for = "toggle"   class = "switch" > label > .switch  {   position : relative;   display : inline-block;   width :  40px ;   height :  20px ;   background-color :  rgba ( 0 ,  0 ,  0 ,  0.25 );   border-radius :  20px ;   transition : all  0.3s ; } .switch ::after  {   content :  '' ;   position : absolute;   width :  18px ;   height :  18px ;   border-radius :  18px ;   background-color : white;   top :  1px ;   left :  1px ;   transition : all  0.3s ; } input [type= 'checkbox' ………………………………