摘要:效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽,點(diǎn)擊鏈接可以全屏預(yù)覽??山换ヒ曨l教程此視頻是可以交互的,你可以隨時(shí)暫停視頻,編輯視頻中的代碼。
效果預(yù)覽
按下右側(cè)的“點(diǎn)擊預(yù)覽”按鈕可以在當(dāng)前頁面預(yù)覽,點(diǎn)擊鏈接可以全屏預(yù)覽。
https://codepen.io/comehope/pen/qYMoPo
此視頻是可以交互的,你可以隨時(shí)暫停視頻,編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cE833h6
源代碼下載每日前端實(shí)戰(zhàn)系列的全部源代碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom,用
居中顯示:
html, body { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(to right bottom, gold, chocolate); }
設(shè)置文本樣式:
nav ul { padding: 0; } nav ul li { font-size: 40px; font-family: sans-serif; list-style-type: none; background-color: white; border: 2px solid black; letter-spacing: 0.1em; }
為容器設(shè)置寬高,此處定義的變量 x 和 y 后面還會(huì)用到:
:root { --x: 5em; --y: 1.5em; } nav ul li { width: var(--x); height: var(--y); line-height: var(--y); }
用偽元素畫出一個(gè)小球,放到菜單項(xiàng)左端:
nav ul li { position: relative; } nav ul li::before { content: ""; position: absolute; height: var(--y); width: var(--y); background-color: black; border-radius: 50%; top: 0; left: calc(-1 * var(--y) / 2); }
用 mix-blend-mode 設(shè)置色彩混合模式,使小球覆蓋的文字反色顯示:
nav ul li span { color: white; mix-blend-mode: difference; }
增加動(dòng)畫,使小球從左側(cè)滾到右側(cè):
nav ul li { overflow: hidden; } nav ul li::before { transition: 0.5s ease-out; } nav ul li:hover::before { --r: calc(var(--x) * 1.2); height: var(--r); width: var(--r); top: calc(-1 * var(--r) / 2 + var(--y) / 2); left: calc(-1 * var(--r) / 2 + var(--x) / 2); }
在 dom 中添加更多的菜單項(xiàng):
最后,設(shè)置一下菜單項(xiàng)之間的間距:
nav ul li { margin: 0.5em; }
大功告成!
知識(shí)點(diǎn)mix-blend-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
var(): https://developer.mozilla.org/en-US/docs/Web/CSS/var
calc(): https://developer.mozilla.org/en-US/docs/Web/CSS/calc
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/113306.html
摘要:效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽,點(diǎn)擊鏈接可以全屏預(yù)覽??山换ヒ曨l教程此視頻是可以交互的,你可以隨時(shí)暫停視頻,編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbcWJO?w=500&h=500); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽,點(diǎn)擊鏈接可以全屏預(yù)覽。https://codepen.io/comeho...
摘要:過往項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份發(fā)布的項(xiàng)目前端每日實(shí)戰(zhàn)專欄每天分解一個(gè)前端項(xiàng)目,用視頻記錄編碼過程,再配合詳細(xì)的代碼解讀,是學(xué)習(xí)前端開發(fā)的活的參考書頻演示如何用純創(chuàng)作一種按鈕被瞄準(zhǔn)的交互特效視頻演示如何用純創(chuàng)作一個(gè)同心圓弧旋轉(zhuǎn)特效視頻演 過往項(xiàng)目 2018 年 4 月份項(xiàng)目匯總(共 8 個(gè)項(xiàng)目) 2018 年 5 月份發(fā)布的項(xiàng)目 《前端每日實(shí)戰(zhàn)》專欄每天分解一個(gè)前端項(xiàng)目,用視頻記錄...
摘要:過往項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份發(fā)布的項(xiàng)目前端每日實(shí)戰(zhàn)專欄每天分解一個(gè)前端項(xiàng)目,用視頻記錄編碼過程,再配合詳細(xì)的代碼解讀,是學(xué)習(xí)前端開發(fā)的活的參考書頻演示如何用純創(chuàng)作一種按鈕被瞄準(zhǔn)的交互特效視頻演示如何用純創(chuàng)作一個(gè)同心圓弧旋轉(zhuǎn)特效視頻演 過往項(xiàng)目 2018 年 4 月份項(xiàng)目匯總(共 8 個(gè)項(xiàng)目) 2018 年 5 月份發(fā)布的項(xiàng)目 《前端每日實(shí)戰(zhàn)》專欄每天分解一個(gè)前端項(xiàng)目,用視頻記錄...
閱讀 1480·2021-11-17 09:33
閱讀 1260·2021-10-11 10:59
閱讀 2892·2021-09-30 09:48
閱讀 1904·2021-09-30 09:47
閱讀 3023·2019-08-30 15:55
閱讀 2335·2019-08-30 15:54
閱讀 1492·2019-08-29 15:25
閱讀 1645·2019-08-29 10:57