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

這是一個基本的幽靈按鈕示例：

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

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

最好讓按鈕從初始懸停點開始填充。

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

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

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

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

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

 <button>Boo!</button>

我們的CSS 實現(xiàn)將利用CSS 自定義屬性。這使得維護更容易，也方便通過內(nèi)聯(liá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;
}

組合在一起，我們得到：

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

添加填充

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

它們必須與父按鈕對齊。我們的CSS 變量在這裡將大有幫助。

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

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

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

現(xiàn)在我們需要將<span></span>元素與按鈕對齊。我們的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>元素裁剪到視圖之外，並添加一個規(guī)則，通過更新裁剪來在懸停時顯示它。定義一個過渡將為它錦上添花。

 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)绾翁砑臃较蚋兄?？我們需要四個元素。每個元素將負責檢測懸停入口點。使用clip-path ，我們可以將按鈕區(qū)域分成四個部分。

讓我們向按鈕添加四個<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;
}

我們可以定位每個元素並使用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%);
}

很酷。為了測試這一點，讓我們在懸停時更改不透明度。

 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;
}

哦，這裡有一個問題。如果我們進入並懸停在一個部分上，然後懸停在另一個部分上，填充方向?qū)淖?。這看起來不太對勁。為了解決這個問題，我們可以在懸停時設(shè)置z-index和clip-path ，以便一個部分填充空間。

 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)建填充動畫，我們也知道如何檢測方向。我們?nèi)绾螌烧呓Y(jié)合起來呢？使用同級組合器！

這樣做意味著當我們懸停一個方向段時，我們可以顯示一個特定的填充元素。

首先，讓我們更新標記。

<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。參考我們的從左到右的填充，我們可以重用樣式。我們只需要為每個元素設(shè)置一個特定的clip-path 。我按照一些屬性值相同的順序來處理。第一個子元素是頂部，第二個是右側(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);
}

最後一步是在懸停配對段時更新相關(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);
}

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

可訪問性

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

這些額外的元素並沒有多大幫助，因為屏幕閱讀器會重複內(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>

不再重複內(nèi)容了。

就這樣！

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

這是一個使用內(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中的方向意識的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！