淘寶的開關(guān)燈特效是一個(gè)很棒的CSS3動(dòng)畫效果,通過精巧的設(shè)計(jì)和代碼實(shí)現(xiàn),讓用戶使用燈光開關(guān)的操作來切換頁面的背景色和顏色風(fēng)格,實(shí)現(xiàn)更加智能的用戶體驗(yàn)。
下面是開關(guān)燈特效的CSS3代碼:
/* 開燈 */ .light-on { background-color: #2c3e50; color: #fff; transition: all .5s; } /* 關(guān)燈 */ .light-off { background-color: #fff; color: #000; transition: all .5s; } /* 開關(guān) */ .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; } /* 開關(guān)打開后滑塊移動(dòng) */ .switch.on .slide { left: 20px; } /* 開關(guān)打開后背景顏色切換 */ .switch.on { background-color: #fff; } /* 開關(guān)關(guān)閉后滑塊移動(dòng) */ .switch.off .slide { left: 0px; } /* 開關(guān)關(guān)閉后背景顏色切換 */ .switch.off { background-color: #2c3e50; }
通過修改以上代碼可以實(shí)現(xiàn)自己想要的效果,比如改變開關(guān)的大小、顏色、形狀等等。
總之,淘寶的開關(guān)燈特效是一個(gè)非常實(shí)用和有趣的CSS3動(dòng)畫效果,對(duì)于前端開發(fā)人員來說,了解這段代碼的實(shí)現(xiàn)方式也是非常重要的。