眾所周知,ios開關按鈕是一種非常獨特而又實用的元素。但是,如果我們想在網頁中使用這樣一個元素,該怎么辦呢?這時,我們可以通過CSS來實現仿ios開關按鈕的效果。
/* 首先,我們先定義一些基本的樣式 */ .switch { position: relative; display: inline-block; width: 50px; height: 24px; } .switch input { opacity: 0; width: 0; height: 0; } /* 接下來,我們來定義一些需要改變的樣式 */ .switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 34px; transition: .4s; } .switch .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; border-radius: 50%; transition: .4s; } /* 當開關打開時,我們需要改變一些樣式 */ .switch input:checked + .slider { background-color: #2196F3; } .switch input:checked + .slider:before { transform: translateX(26px); } /* 最后,我們把input和slider組合在一起 */ .switch input:focus + .slider { box-shadow: 0 0 1px #2196F3; }
如此一來,我們就可以在網頁中使用仿ios開關按鈕了。當然,這只是一個簡單的例子,如果我們想要實現更加復雜的效果,需要更加深入地學習CSS。
上一篇css以元素中心縮放
下一篇css價格中劃線