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

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

為雞冠等地區(qū)用戶提供了全套網(wǎng)頁設計制作服務，及雞冠網(wǎng)站建設行業(yè)解決方案。主營業(yè)務為做網(wǎng)站、成都網(wǎng)站建設、雞冠網(wǎng)站設計，以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

基礎

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

我們使用 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)，但是它不滿足我們需要的四個方面，而且它還會干擾可訪問性…稍后我們再講。

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

<button>Boo!

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

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

}

哎呀，這里有個問題。如果我們進入并懸停一個分段，然后懸停在另一分段上，則填充方向將會發(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)想要的效果呢？答案是同級選擇器！

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

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

Boo!

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

}

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

可訪問性

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

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

Boo!

</button>

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

分享標題：如何使用CSS實現(xiàn)具有方面感知的幽靈按鈕
文章URL：http://muchs.cn/article42/ighpec.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、網(wǎng)站設計、云服務器、面包屑導航、網(wǎng)站建設、標簽優(yōu)化

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容