如何用純 CSS 創作一種有削鐵如泥感覺的選單導航特效
阿新 • • 發佈:2018-11-20
效果預覽
按下右側的“點選預覽”按鈕可以在當前頁面預覽,點選連結可以全屏預覽。
https://codepen.io/comehope/pen/XqYroe
可互動視訊教程
此視訊是可以互動的,你可以隨時暫停視訊,編輯視訊中的程式碼。
請用 chrome, safari, edge 開啟觀看。
https://scrimba.com/p/pEgDAM/c7EbPuW
原始碼下載
本地下載
請從 github 下載。
https://github.com/comehope/front-end-daily-challenges/tree/master/019-split-text-menu-effects
程式碼解讀
定義 dom,一個列表中包含一個列表項,列表項有一個 data-text 屬性:
<ul class="menu">
<li data-text="New Game">New Game</li>
</ul>
居中顯示:
html, body { height: 100%; display: flex; align-items: center; justify-content: center; background-color: black; }
設定文字樣式:
.menu {
padding: 0;
}
.menu li {
list-style-type: none;
color: white;
font-size: 3em;
font-weight: bold;
text-transform: uppercase;
text-align: center;
line-height: 1em;
width: 7em;
}
畫出文字的分割線:
.menu li {
border-top: 1px solid yellow;
}
隱藏文字:
.menu li { color: transparent; }
用偽元素增加文字:
.menu li {
position: relative;
}
.menu li::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
color: silver;
}
把偽元素文字向上移,豎跨分割線:
.menu li::before,
.menu li::after {
top: -0.5em;
}
用遮罩切出分割線上下二部分的文字:
.menu li::before {
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
.menu li::after {
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}
dom 中再增加幾個選單項:
<ul class="menu">
<li data-text="New Game">New Game</li>
<li data-text="Load Game">Load Game</li>
<li data-text="Options">Options</li>
<li data-text="Exit">Exit</li>
</ul>
.menu li {
margin: 0.5em;
}
為分割線增加動畫效果:
.menu li {
border-top: 1px solid transparent;
transition: 0.3s;
}
.menu li:hover {
border-top: 1px solid yellow;
}
為文字增加動畫效果:
.menu li::before,
.menu li::after {
transition: 0.3s ease-out;
}
.menu li:hover::before,
.menu li:hover::after {
color: yellow;
transition: left 0.3s ease-out;
transition-delay: 0.2s;
}
.menu li:nth-child(odd):hover::before,
.menu li:nth-child(even):hover::after {
left: -0.15em;
}
.menu li:nth-child(even):hover::before,
.menu li:nth-child(odd):hover::after {
left: 0.15em;
}
大功告成!
知識點
- border-top https://developer.mozilla.org/en-US/docs/Web/CSS/border-top
- content https://developer.mozilla.org/en-US/docs/Web/CSS/content
- attr https://developer.mozilla.org/en-US/docs/Web/CSS/attr
- clip-path https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
- transition-delay https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay
- nth-child() https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child#Syntax