淘寶的開關燈特效是一個很棒的CSS3動畫效果,通過精巧的設計和代碼實現,讓用戶使用燈光開關的操作來切換頁面的背景色和顏色風格,實現更加智能的用戶體驗。
下面是開關燈特效的CSS3代碼:
/* 開燈 */ .light-on { background-color: #2c3e50; color: #fff; transition: all .5s; } /* 關燈 */ .light-off { background-color: #fff; color: #000; transition: all .5s; } /* 開關 */ .switch { width: 50px; height: 30px; background-color: #ccc; display: inline-block; border-radius: 15px; position: relative; cursor: pointer; } /* 滑塊 */ .slide { width: 30px; height: 30px; background-color: #fff; position: absolute; top: 0; border-radius: 50%; box-shadow: 0 0 5px rgba(0,0,0,.3); left: 0; transition: all .5s; } /* 開關打開后滑塊移動 */ .switch.on .slide { left: 20px; } /* 開關打開后背景顏色切換 */ .switch.on { background-color: #fff; } /* 開關關閉后滑塊移動 */ .switch.off .slide { left: 0px; } /* 開關關閉后背景顏色切換 */ .switch.off { background-color: #2c3e50; }
通過修改以上代碼可以實現自己想要的效果,比如改變開關的大小、顏色、形狀等等。
總之,淘寶的開關燈特效是一個非常實用和有趣的CSS3動畫效果,對于前端開發人員來說,了解這段代碼的實現方式也是非常重要的。
上一篇淘寶CSS樣式導航全集