摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
效果預覽
按下右側的“點擊預覽”按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/yxbEzJ
可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cGanPU6
源代碼下載每日前端實戰系列的全部源代碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom,導航中包含一個無序列表,列表中有一個列表項:
居中顯示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: lightyellow; }
隱藏列表項前端的引導符號:
nav ul { padding: 0; list-style-type: none; }
設置容器尺寸:
nav li { width: 8em; height: 2em; font-size: 25px; }
設置文字樣式:
nav li { font-size: 25px; text-align: center; line-height: 2em; font-family: sans-serif; text-transform: capitalize; }
添加偽元素,偽元素是 2 個小球:
nav li { position: relative; } nav li::before, nav li::after { content: ""; position: absolute; width: 0.6em; height: 0.6em; background-color: gainsboro; border-radius: 50%; }
把小球定位在左右兩端:
nav li::before { top: calc(50% - 0.6em / 2); left: 0; } nav li::after { bottom: calc(50% - 0.6em / 2); right: 0; }
接下來設置按鈕懸停效果。
當鼠標懸停在按鈕上時,讓小球變為與容器大小相等的矩形:
nav li:hover::before, nav li:hover::after { width: 100%; height: 100%; border-radius: 0; }
第其中一個矩形稍向右下角錯位,并且加深它的顏色,形成陰影效果:
nav li:hover::before { z-index: -1; top: 0; } nav li:hover::after { z-index: -2; bottom: -0.4em; right: -0.4em; filter: brightness(0.8); }
設置懸停的顏色,偽元素的矩形背景變為藍色,文字變為白色:
nav li:hover { color: white; } nav li:hover::before, nav li:hover::after { background-color: dodgerblue; }
設置緩動時間,其中偽元素的緩動時間函數用擬人的動畫效果:
nav li { transition: 0.5s; } nav li::before, nav li::after { transition: 0.5s cubic-bezier(0.5, -0.5, 0.25, 1.5); }
再增加幾個按鈕:
最后,增加按鈕之間的間距:
nav li { margin: 0.8em; }
大功告成!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54581.html
摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbgnoQ?w=400&h=300); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。 https://codepen.io/comehop...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書 過往項目 2018 年 8 月份項目匯總(共 29 個項目) 2018 年 7 月份項目匯總(共 29 個項目) 2018 年 6 月份項目匯總(...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書 過往項目 2018 年 8 月份項目匯總(共 29 個項目) 2018 年 7 月份項目匯總(共 29 個項目) 2018 年 6 月份項目匯總(...
閱讀 3315·2021-11-12 10:36
閱讀 2467·2021-11-02 14:43
閱讀 2146·2019-08-30 14:23
閱讀 3463·2019-08-30 13:08
閱讀 919·2019-08-28 18:09
閱讀 3129·2019-08-26 12:22
閱讀 3141·2019-08-23 18:24
閱讀 2017·2019-08-23 18:17