摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻教程此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
效果預覽
按下右側的“點擊預覽”按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/mKdzZM
可交互視頻教程此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cgnk6Sb
源代碼下載每日前端實戰系列的全部源代碼請從 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: black; }
定義文本和按鈕邊框樣式:
nav ul { padding: 0; } nav ul li { color: white; list-style-type: none; font-size: 32px; font-family: sans-serif; text-transform: uppercase; width: 12em; height: 4em; border: 1px solid rgba(255, 255, 255, 0.2); text-align: center; line-height: 4em; letter-spacing: 0.2em; }
用 before 偽元素定義上邊框和右邊框,其中邊框顏色因會多次被用到,所以采用變量:
:root { --color: dodgerblue; } nav ul li::before { content: ""; position: absolute;; width: 0; height: 0; visibility: hidden; top: 0; left: 0; border-top: 1px solid var(--color); border-right: 1px solid var(--color); }
類似地,用 after 偽元素定義右邊框和下邊框:
nav ul li::after { content: ""; position: absolute;; width: 0; height: 0; visibility: hidden; bottom: 0; right: 0; border-bottom: 1px solid var(--color); border-left: 1px solid var(--color); }
設計邊框入場的動畫效果,按上、右、下、左的順序依次顯示邊框,為了方便調整動畫的速度設置了與時間相關的變量:
:root { --time-slot-length: 0.1s; --t1x: var(--time-slot-length); --t2x: calc(var(--time-slot-length) * 2); --t3x: calc(var(--time-slot-length) * 3); --t4x: calc(var(--time-slot-length) * 4); } nav ul li:hover::before, nav ul li:hover::after { width: 100%; height: 100%; visibility: visible; } nav ul li:hover::before { transition: visibility 0s, width linear var(--t1x), height linear var(--t1x) var(--t1x); } nav ul li:hover::after { transition: visibility 0s var(--t2x), width linear var(--t1x) var(--t2x), height linear var(--t1x) var(--t3x); }
設計邊框出場的動畫效果,與入場的順序相反:
nav ul li::before { transition: height linear var(--t1x) var(--t2x), width linear var(--t1x) var(--t3x), visibility 0s var(--t4x); } nav ul li::after { transition: height linear var(--t1x), width linear var(--t1x) var(--t1x), visibility 0s var(--t2x); }
讓按鈕文字在描邊期間變色:
nav ul li { transition: var(--t4x); } nav ul li:hover { color: var(--color); }
最后,在描邊結束后,在按鈕四周增加一個脈沖動畫,加強動感:
nav ul li:hover { animation: pulse ease-out 1s var(--t4x); } @keyframes pulse { from { box-shadow: 0 0 rgba(30, 144, 255, 0.4); } to { box-shadow: 0 0 0 1em rgba(30, 144, 255, 0); } }
大功告成!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/113385.html
摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻教程此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbcWLf?w=500&h=500); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。 https://codepen.io/comeh...
摘要:過往項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書頻演示如何用純創作一種按鈕被瞄準的交互特效視頻演示如何用純創作一個同心圓弧旋轉特效視頻演 過往項目 2018 年 4 月份項目匯總(共 8 個項目) 2018 年 5 月份發布的項目 《前端每日實戰》專欄每天分解一個前端項目,用視頻記錄...
摘要:過往項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書頻演示如何用純創作一種按鈕被瞄準的交互特效視頻演示如何用純創作一個同心圓弧旋轉特效視頻演 過往項目 2018 年 4 月份項目匯總(共 8 個項目) 2018 年 5 月份發布的項目 《前端每日實戰》專欄每天分解一個前端項目,用視頻記錄...
閱讀 3565·2021-09-24 09:48
閱讀 1087·2021-09-10 10:51
閱讀 3268·2019-08-30 13:03
閱讀 3315·2019-08-30 12:51
閱讀 1387·2019-08-30 11:22
閱讀 1052·2019-08-29 18:38
閱讀 2035·2019-08-29 16:41
閱讀 3183·2019-08-29 15:32