色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css 仿apple 開關

洪振霞1年前8瀏覽0評論

CSS是前端開發常見的一種語言,它能夠使網頁更加美觀、易于閱讀和導航。此外,CSS還可以實現各種酷炫的效果,例如仿蘋果開關。

/*仿蘋果開關CSS*/
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* 調整為圓形開關 */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}

上述代碼實現了一個基本的仿蘋果開關。它由一個包含邊框、背景等樣式的容器和具有不透明度、移動效果的指示器組成。首先,我們需要創建一個包含開關的div元素,并為其添加類名“switch”。在div元素內,我們需要創建一個checkbox元素,它將控制開關的狀態。

在樣式表中,我們為switch類創建了一些基本的樣式。這些樣式包括一個相對定位的容器、隱藏的checkbox元素等等。我們還為指示器元素添加了絕對定位和背景顏色。

此外,我們使用transition屬性指定了動畫效果。這個屬性允許我們指定一個或多個CSS屬性,以及一個時間長度和運動曲線。這些屬性可以在狀態變化時發生平滑的過渡。

最后,我們使用:checked偽類選擇器來檢測checkbox元素的狀態,在checked狀態時改變指示器的樣式。此時,我們移動了指示器元素的位置,并將其背景色設置為主題色。

通過使用以上代碼,我們可以為網站或應用程序添加仿蘋果開關,從而提高用戶體驗和界面美感。