如何用純 CSS 創作氣泡填色的按鈕特效
阿新 • • 發佈:2018-11-29
效果預覽
按下右側的“點選預覽”按鈕可以在當前頁面預覽,點選連結可以全屏預覽。
https://codepen.io/comehope/pen/eKqZjy
可互動視訊
此視訊是可以互動的,你可以隨時暫停視訊,編輯視訊中的程式碼。
請用 chrome, safari, edge 開啟觀看。
https://scrimba.com/p/pEgDAM/ceBEytp
原始碼下載
本地下載
每日前端實戰系列的全部原始碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
程式碼解讀
定義 dom,用 <nav>
<ul>
, <li>
構建導航結構,每個 <li>
中包含表示氣泡的 4 個 <span>
:
<nav> <ul> <li> home <span></span><span></span><span></span><span></span> </li> </ul> </nav>
居中顯示:
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
設定按鈕樣式:
nav ul { list-style-type: none; margin: 0; padding: 0; } nav ul li { --c: goldenrod; color: var(--c); font-size: 16px; border: 0.3em solid var(--c); border-radius: 0.5em; width: 12em; height: 3em; text-transform: uppercase; font-weight: bold; font-family: sans-serif; letter-spacing: 0.1em; text-align: center; line-height: 3em; }
在按鈕下面畫出氣泡:
nav ul li {
position: relative;
}
nav ul li span {
position: absolute;
width: 25%;
height: 100%;
background-color: var(--c);
transform: translateY(150%);
border-radius: 50%;
}
把 4 個氣泡並排擺放:
nav ul li span {
left: calc((var(--n) - 1) * 25%);
}
nav ul li span:nth-child(1) {
--n: 1;
}
nav ul li span:nth-child(2) {
--n: 2;
}
nav ul li span:nth-child(3) {
--n: 3;
}
nav ul li span:nth-child(4) {
--n: 4;
}
增加當滑鼠懸停在按鈕上時,4 個氣泡依次出現的效果:
nav ul li span {
transition: 0.5s;
transition-delay: calc((var(--n) - 1) * 0.1s);
}
nav ul li:hover span {
transform: translateY(0) scale(2);
}
隱藏按鈕外的內容,形成只在懸停時氣泡才出現的效果:
nav ul li {
overflow: hidden;
}
把氣泡放到下層,文字放到上層:
nav ul li {
z-index: 1;
transition: 0.5s;
}
nav ul li span {
z-index: -1;
}
nav ul li:hover {
color: black;
}
在 dom 中再增加幾個按鈕:
<nav>
<ul>
<li>
home
<span></span><span></span><span></span><span></span>
</li>
<li>
products
<span></span><span></span><span></span><span></span>
</li>
<li>
services
<span></span><span></span><span></span><span></span>
</li>
<li>
contact
<span></span><span></span><span></span><span></span>
</li>
</ul>
</nav>
最後,給按鈕之間留出空隙:
nav ul li {
margin: 1em;
}
大功告成!