CSS仿IOS開關按鈕是一種很有用的設計,可以讓網頁看起來更加現代化和專業化。
/* 開關按鈕樣式 */ .switch { position: relative; display: inline-block; width: 52px; height: 26px; margin: 0 10px; } /* 開關按鈕背景樣式 */ .switch input { opacity: 0; width: 0; height: 0; } /* 開關按鈕狀態樣式 */ .switch input:checked + .slider { background-color: #2196F3; } .switch input:focus + .slider { box-shadow: 0 0 1px #2196F3; } /* 開關按鈕滑塊樣式 */ .switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: 0.4s; transition: 0.4s; border-radius: 16px; } .switch .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; -webkit-transition: 0.4s; transition: 0.4s; border-radius: 50%; } /* 開關按鈕狀態打開時的滑塊位置 */ .switch input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }
以上是仿IOS開關按鈕的CSS代碼,可以根據需要調整其中的顏色和大小等參數。