简要教程 这是一组使用CSS3制作的精美滑动开关按钮特效。这组滑动按钮按Bootstrap的情景类来设计,可以适应5种不同的场景,以及一种不可用的状态。 使用方法 HTML结构 该滑动按钮效果的基本HTML结构使用一个元素来包裹一个元素和两个元素。 Default 登录后复制CSS样式第一个元素.switch-box-slider用于制作滑动按钮的滑动轴。.switch-box .switch-box-slider { position: relative; display: inline-block; height: 8px; width: 32px; background: #d5d5d5; border-radius: 8px; cursor: pointer; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }登录后复制.switch-box-slider元素的::after伪元素用于制作圆形的滑块。.switch-box .switch-box-slider:after { position: absolute; left: -8px; top: -8px; display: block; width: 24px; height: 24px; border-radius: 50%; background: #eeeeee; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2); content: ''; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }登录后复制当.switch-box-input元素处于checked状态时,.switch-box-slider的:after伪元素的left属性被修改,圆形滑块被移动。.switch-box .switch-box-input ~ .switch-box-label { margin-left: 8px; } .switch-box .switch-box-input:checked ~ .switch-box-slider:after { left: 16px; }登录后复制以上就是一组精美的纯CSS3滑动开关按钮的内容,更多相关内容请关注PHP中文网(www.php.cn)!