CSS3Switch切換器(CSS3 Switch)是一種基于CSS3的切換按鈕,它不需要任何Javascript的支持,可以完全通過CSS來實現。這種切換器非常簡單易用,而且兼容性也很好,適用于各種網站的切換效果。
下面是CSS3Switch切換器的基本代碼:
.switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input[type="checkbox"] { opacity: 0; width: 0; height: 0; } .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: #fff; -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); }
通過上面的CSS樣式,我們可以創建一個非常簡單的切換按鈕,只需要在頁面中引用這些代碼即可:
這個切換器看起來非常簡單,但是它的效果非常出色,可以讓網站變得更加動態,更加現代化。而且這個切換器還可以進行個性化的定制,根據網站的需要來進行不同的顏色和樣式調整。