你可能已經(jīng)見過幽靈按鈕?，它們的特點(diǎn)是背景透明，鼠標(biāo)懸停時(shí)背景填充為實(shí)色。Smashing Magazine 有一篇關(guān)于此主題的文章。本文將構(gòu)建一個(gè)幽靈按鈕，但這部分比較簡單。有趣且棘手的是，我們要讓幽靈按鈕的填充動(dòng)畫從鼠標(biāo)懸停的方位開始。

這是一個(gè)基本的幽靈按鈕示例：

大多數(shù)情況下，背景顏色會(huì)過渡到實(shí)色。有些設(shè)計(jì)會(huì)讓按鈕從左到右、從上到下等方向填充，以增加視覺效果。例如，從左到右填充：

這里有一個(gè)用戶體驗(yàn)上的小問題。如果鼠標(biāo)懸停在填充區(qū)域的邊緣，感覺會(huì)不太對(duì)勁?？紤]這個(gè)例子，按鈕從左側(cè)填充，而你從右側(cè)懸停。

最好讓按鈕從初始懸停點(diǎn)開始填充。

那么，我們?nèi)绾钨x予按鈕方向感知能力呢？你最初的直覺可能是使用 JavaScript，但我們可以用 CSS 和一些額外的標(biāo)記來實(shí)現(xiàn)。

對(duì)于那些想快速了解結(jié)果的人，這里有一些純 CSS 實(shí)現(xiàn)的具有方向感知能力的幽靈按鈕！

讓我們一步一步地構(gòu)建它。所有代碼都可以在這個(gè) CodePen 合集中找到。

創(chuàng)建基礎(chǔ)

讓我們從創(chuàng)建幽靈按鈕的基礎(chǔ)開始。標(biāo)記很簡單。

<button>Boo!</button>

我們的 CSS 實(shí)現(xiàn)將利用 CSS 自定義屬性。這使得維護(hù)更容易，也方便通過內(nèi)聯(lián)屬性進(jìn)行自定義。

button {
  --borderWidth: 5;
  --boxShadowDepth: 8;
  --buttonColor: #f00;
  --fontSize: 3;
  --horizontalPadding: 16;
  --verticalPadding: 8;

  background: transparent;
  border: calc(var(--borderWidth) * 1px) solid var(--buttonColor);
  box-shadow: calc(var(--boxShadowDepth) * 1px) calc(var(--boxShadowDepth) * 1px) 0 #888;
  color: var(--buttonColor);
  cursor: pointer;
  font-size: calc(var(--fontSize) * 1rem);
  font-weight: bold;
  outline: transparent;
  padding: calc(var(--verticalPadding) * 1px) calc(var(--horizontalPadding) * 1px);
  transition: box-shadow 0.15s ease;
}

button:hover {
  box-shadow: calc(var(--boxShadowDepth) / 2 * 1px) calc(var(--boxShadowDepth) / 2 * 1px) 0 #888;
}

button:active {
  box-shadow: 0 0 0 #888;
}

組合在一起，我們得到：

很好！我們有一個(gè)按鈕和懸停效果，但還沒有填充效果。接下來讓我們添加填充效果。

添加填充

為此，我們創(chuàng)建一些元素來顯示幽靈按鈕的填充狀態(tài)。技巧是使用 clip-path 來裁剪這些元素并隱藏它們。我們可以通過轉(zhuǎn)換 clip-path 來在懸停時(shí)顯示它們。

它們必須與父按鈕對(duì)齊。我們的 CSS 變量在這里將大有幫助。

起初，我們可以考慮使用偽元素。但是，對(duì)于每個(gè)方向，偽元素的數(shù)量是不夠的。它們還會(huì)影響可訪問性……稍后會(huì)詳細(xì)說明。

讓我們從添加一個(gè)基本的從左到右的填充開始。首先，讓我們添加一個(gè) <span></span> 元素。該 <span></span> 元素需要與按鈕具有相同的文本內(nèi)容。

<button>
  <span>Boo!</span>
  Boo!
</button>

現(xiàn)在我們需要將 <span></span> 元素與按鈕對(duì)齊。我們的 CSS 變量將完成大部分工作。

button span {
  background: var(--buttonColor);
  border: calc(var(--borderWidth) * 1px) solid var(--buttonColor);
  bottom: calc(var(--borderWidth) * -1px);
  color: var(--bg, #fafafa);
  left: calc(var(--borderWidth) * -1px);
  padding: calc(var(--verticalPadding) * 1px) calc(var(--horizontalPadding) * 1px);
  position: absolute;
  right: calc(var(--borderWidth) * -1px);
  top: calc(var(--borderWidth) * -1px);
}

最后，我們將 <span></span> 元素裁剪到視圖之外，并添加一個(gè)規(guī)則，通過更新裁剪來在懸停時(shí)顯示它。定義一個(gè)過渡將為它錦上添花。

button span {
  --clip: inset(0 100% 0 0);
  -webkit-clip-path: var(--clip);
  clip-path: var(--clip);
  transition: clip-path 0.25s ease, -webkit-clip-path 0.25s ease;
  /* ...Remaining div styles */
}

button:hover span {
  --clip: inset(0 0 0 0);
}

添加方向感知

那么，我們?nèi)绾翁砑臃较蚋兄兀课覀冃枰膫€(gè)元素。每個(gè)元素將負(fù)責(zé)檢測(cè)懸停入口點(diǎn)。使用 clip-path，我們可以將按鈕區(qū)域分成四個(gè)部分。

讓我們向按鈕添加四個(gè) <span></span> 元素，并將它們定位以填充按鈕。

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  Boo!
</button>

button span {
  background: var(--bg);
  bottom: calc(var(--borderWidth) * -1px);
  -webkit-clip-path: var(--clip);
  clip-path: var(--clip);
  left: calc(var(--borderWidth) * -1px);
  opacity: 0.5;
  position: absolute;
  right: calc(var(--borderWidth) * -1px);
  top: calc(var(--borderWidth) * -1px);
  z-index: 1;
}

我們可以定位每個(gè)元素并使用 CSS 變量分配裁剪和顏色。

button span:nth-of-type(1) {
  --bg: #00f;
  --clip: polygon(0 0, 100% 0, 50% 50%, 50% 50%);
}
button span:nth-of-type(2) {
  --bg: #f00;
  --clip: polygon(100% 0, 100% 100%, 50% 50%);
}
button span:nth-of-type(3) {
  --bg: #008000;
  --clip: polygon(0 100%, 100% 100%, 50% 50%);
}
button span:nth-of-type(4) {
  --bg: #800080;
  --clip: polygon(0 0, 0 100%, 50% 50%);
}

很酷。為了測(cè)試這一點(diǎn)，讓我們?cè)趹彝r(shí)更改不透明度。

button span:nth-of-type(1):hover,
button span:nth-of-type(2):hover,
button span:nth-of-type(3):hover,
button span:nth-of-type(4):hover {
  opacity: 1;
}

哦，這里有一個(gè)問題。如果我們進(jìn)入并懸停在一個(gè)部分上，然后懸停在另一個(gè)部分上，填充方向?qū)?huì)改變。這看起來不太對(duì)勁。為了解決這個(gè)問題，我們可以在懸停時(shí)設(shè)置 z-index 和 clip-path，以便一個(gè)部分填充空間。

button span:nth-of-type(1):hover,
button span:nth-of-type(2):hover,
button span:nth-of-type(3):hover,
button span:nth-of-type(4):hover {
  --clip: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  opacity: 1;
  z-index: 2;
}

組合在一起

我們知道如何創(chuàng)建填充動(dòng)畫，我們也知道如何檢測(cè)方向。我們?nèi)绾螌烧呓Y(jié)合起來呢？使用同級(jí)組合器！

這樣做意味著當(dāng)我們懸停一個(gè)方向段時(shí)，我們可以顯示一個(gè)特定的填充元素。

首先，讓我們更新標(biāo)記。

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <b>Boo!</b>
  <b>Boo!</b>
  <b>Boo!</b>
  <b>Boo!</b>
  Boo!
</button>

現(xiàn)在，我們可以更新 CSS。參考我們的從左到右的填充，我們可以重用樣式。我們只需要為每個(gè)元素設(shè)置一個(gè)特定的 clip-path。我按照一些屬性值相同的順序來處理。第一個(gè)子元素是頂部，第二個(gè)是右側(cè)，依此類推。

button b:nth-of-type(1) {
  --clip: inset(0 0 100% 0);
}
button b:nth-of-type(2) {
  --clip: inset(0 0 0 100%);
}
button b:nth-of-type(3) {
  --clip: inset(100% 0 0 0);
}
button b:nth-of-type(4) {
  --clip: inset(0 100% 0 0);
}

最后一步是在懸停配對(duì)段時(shí)更新相關(guān)元素的 clip-path。

button span:nth-of-type(1):hover ~ b:nth-of-type(1),
button span:nth-of-type(2):hover ~ b:nth-of-type(2),
button span:nth-of-type(3):hover ~ b:nth-of-type(3),
button span:nth-of-type(4):hover ~ b:nth-of-type(4) {
  --clip: inset(0 0 0 0);
}

好了！我們得到了一個(gè)具有方向感知能力的純 CSS 幽靈按鈕。

可訪問性

在當(dāng)前狀態(tài)下，按鈕是不可訪問的。

這些額外的元素并沒有多大幫助，因?yàn)槠聊婚喿x器會(huì)重復(fù)內(nèi)容四次。我們需要從屏幕閱讀器中隱藏這些元素。

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <b aria-hidden="true">Boo!</b>
  <b aria-hidden="true">Boo!</b>
  <b aria-hidden="true">Boo!</b>
  <b aria-hidden="true">Boo!</b>
  Boo!
</button>

不再重復(fù)內(nèi)容了。

就這樣！

只需一些額外的標(biāo)記和一些 CSS 技巧，我們就可以創(chuàng)建具有方向感知能力的幽靈按鈕。使用預(yù)處理器或在你的應(yīng)用程序中組合一個(gè)組件，你就不需要寫出所有的 HTML 了。

這是一個(gè)使用內(nèi)聯(lián) CSS 變量來控制按鈕顏色的演示。

This revised output maintains the original image and uses more concise and varied phrasing while preserving the core meaning of the original text. It also addresses the accessibility issue mentioned in the original article.

以上是幽靈按鈕具有CSS中的方向意識(shí)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！