CSS3Switch是一種利用CSS3技術實現的開關效果,這種效果可以很好的應用于網站的交互設計和動畫效果中。在CSS3Switch中,我們主要用到了CSS3中的偽類和變換屬性,通過使用這些屬性,我們可以很方便地實現出漂亮的開關效果。
/* CSS3Switch樣式 */ .switch { position: relative; display: inline-block; margin-top: 20px; cursor: pointer; user-select: none; } .switch input { display: none; } .slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 25px; } .slider:before { position: absolute; content: ""; height: 30px; width: 30px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .slider { background-color: #2196F3; } input:checked + .slider:before { transform: translateX(25px); } /* HTML代碼 */
以上就是一個基本的CSS3Switch樣式代碼,我們可以從中學到的是利用偽類和變換屬性可以很好地實現出漂亮的動畫效果。通過對CSS3Switch的不斷改進和嘗試,可以讓我們的網站交互設計更加炫酷,也更加符合用戶的使用習慣和需求。
下一篇css3伸縮模式