簡要教學 這是一組使用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)!