如何用純 CSS 創作一個菜單反色填充特效
阿新 • • 發佈:2018-11-21
home alt root 代碼 文字 1.2 mozilla follow 如何
本地下載
效果預覽
在線演示
按下右側的“點擊預覽”按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/qYMoPo
可交互視頻教程
此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cE833h6
源代碼下載
本地下載
每日前端實戰系列的全部源代碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
代碼解讀
定義 dom,用 <nav> 定義導航欄,但 <li> 中要包含一個 <span>:
<nav>
<ul>
<li><span>Home</span></li>
</ul>
</nav>
居中顯示:
html, body { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(to right bottom, gold, chocolate); }
設置文本樣式:
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;
}
為容器設置寬高,此處定義的變量 x 和 y 後面還會用到:
:root { --x: 5em; --y: 1.5em; } nav ul li { width: var(--x); height: var(--y); line-height: var(--y); }
用偽元素畫出一個小球,放到菜單項左端:
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 設置色彩混合模式,使小球覆蓋的文字反色顯示:
nav ul li span {
color: white;
mix-blend-mode: difference;
}
增加動畫,使小球從左側滾到右側:
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 中添加更多的菜單項:
<nav>
<ul>
<li><span>Home</span></li>
<li><span>Products</span></li>
<li><span>Services</span></li>
<li><span>Contact</span></li>
</ul>
</nav>
最後,設置一下菜單項之間的間距:
nav ul li {
margin: 0.5em;
}
大功告成!
知識點
- 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
原文地址:https://segmentfault.com/a/1190000014876348
如何用純 CSS 創作一個菜單反色填充特效