一組精美的純CSS3滑動開關按鈕

簡要教程

這是一組使用CSS3製作的精美滑動開關按鈕特效。這組滑動按鈕按Bootstrap的情景類來設計，可以適應5種不同的情境，以及一種停用狀態。

使用方法

HTML結構

該滑動按鈕效果的基本HTML結構使用一個<div>元素來包裹一個<input>元素和兩個<label>元素。

<div class="switch-box">  <input id="default" class="switch-box-input" type="checkbox" />  <label for="default" class="switch-box-slider"></label>  <label for="default" class="switch-box-label">Default</label></div>

CSS樣式

第一個<label>元素.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滑動開關按鈕的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！

