如何使用CSS實現(xiàn)具有方面感知的幽靈按鈕

小編給大家分享一下如何使用CSS實現(xiàn)具有方面感知的幽靈按鈕，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

　　基礎(chǔ)

　　我們先創(chuàng)建一個按鈕，很簡單！

　　<button>Boo!</button>

　　我們使用 CSS 自定義屬性完成樣式，這樣更易于維護。

　　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;

　　}

　　我們實現(xiàn)了一個按鈕及懸停效果，但是沒有填充。我們繼續(xù)進行！

　　添加填充

　　我們額外創(chuàng)建元素做為按鈕填充時的狀態(tài)。通過 clip-path 將它隱藏。當鼠標懸停在按鈕上時設置 clip-path將元素過渡顯示出來。

　　它們必須與父按鈕對齊。這里我們的 CSS 變量會顯示出它的優(yōu)勢。

　　本來我們可以通過偽元素實現(xiàn)，但是它不滿足我們需要的四個方面，而且它還會干擾可訪問性&hellip;稍后我們再講。

　　我們先添加一個從左到右填充的效果。首頁我們要添加一個 span 標簽，它與按鈕具有相同的內(nèi)容。

　　<button>Boo!

　　<span>Boo!</span>

　　</button>

　　下面我們要將 span 與按鈕重疊對齊。

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

　　}

　　最后，我們通過裁剪使元素隱藏，當懸停時更新裁剪規(guī)則使元素顯示出來。

　　button span {

　　--clip: inset(0 100% 0 0);

　　-webkit-clip-path: var(--clip);

　　clip-path: var(--clip);

　　transition: clip-path 0.25s ease;

　　// ...Remaining div styles

　　}

　　button:hover span {

　　--clip: inset(0 0 0 0);

　　}

　　添加方向感知

　　那么，如何感知方向呢？我們需要四個要素。每個元素將負責檢測懸停入口點。使用 clip-path，我們可以將按鈕區(qū)域分為四個部分。

　　我們在按鈕里添加四個 span，并放在四個方面以進行填充按鈕。<button>

　　Boo!

　　<span></span>

　　<span></span>

　　<span></span>

　　<span></span>

　　</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 變量賦予它們背景色及裁剪規(guī)則。

　　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ū)l(fā)生變化。這看起來很不對勁。要解決此問題，我們可以在懸停時設置 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;

　　}

　　合到一起

　　現(xiàn)在我們知道如何創(chuàng)建填充動畫了，也知道如何判斷方向了。那我們應該如何將它們放到一起實現(xiàn)想要的效果呢？答案是同級選擇器！

　　當我們將鼠標懸停在一方向塊上時，我們可以填充指定的元素。

　　首先，我們要更新一下我們的代碼：

　　<button>

　　Boo!

　　<span></span>

　　<span></span>

　　<span></span>

　　<span></span>

　　<b>Boo!</b>

　　<b>Boo!</b>

　　<b>Boo!</b>

　　<b>Boo!</b>

　　</button>

　　接下來，我們需要更新一下我們的 CSS，填充樣式我們可以復用從左到右的樣式。但需要為每個元素設置不同的 clip-path。我們按第一個在上，第二個在右，第三個在下，第四個在左的順序設置。

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

　　}

　　最后一步是鼠標懸停在對應方向塊時更新對應元素的 clip-path。

　　button span:nth-of-type(1):hover &mdash;&mdash; b:nth-of-type(1),

　　button span:nth-of-type(2):hover &mdash;&mdash; b:nth-of-type(2),

　　button span:nth-of-type(3):hover &mdash;&mdash; b:nth-of-type(3),

　　button span:nth-of-type(4):hover &mdash;&mdash; b:nth-of-type(4) {

　　--clip: inset(0 0 0 0);

　　}

　　至此，我們具有方向感知性的幽靈按鈕就實現(xiàn)了。

　　可訪問性

　　當按鈕不可訪問里，會顯示如下狀態(tài)。

　　這些額外的元素使屏幕閱讀器重復閱讀了四次。所以，我們需要將它們隱藏起來。

　　<button>

　　Boo!

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

　　</button>

以上是“如何使用CSS實現(xiàn)具有方面感知的幽靈按鈕”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！