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

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

基礎(chǔ)

我們先創(chuàng)建一個(gè)按鈕，很簡(jiǎn)單！

<button>Boo!</button>

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

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;

}

我們實(shí)現(xiàn)了一個(gè)按鈕及懸停效果，但是沒(méi)有填充。我們繼續(xù)進(jìn)行！

添加填充

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

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

本來(lái)我們可以通過(guò)偽元素實(shí)現(xiàn)，但是它不滿足我們需要的四個(gè)方面，而且它還會(huì)干擾可訪問(wèn)性&hellip;稍后我們?cè)僦v。

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

<button>Boo!

<span>Boo!</span>

</button>

下面我們要將 span 與按鈕重疊對(duì)齊。

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ò)裁剪使元素隱藏，當(dāng)懸停時(shí)更新裁剪規(guī)則使元素顯示出來(lái)。

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

}

添加方向感知

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

我們?cè)诎粹o里添加四個(gè) span，并放在四個(gè)方面以進(jìn)行填充按鈕。<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;

}

我們將每個(gè)元素進(jìn)行定位并使用 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%);

}

為了測(cè)試，懸停時(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è)問(wèn)題。如果我們進(jìn)入并懸停一個(gè)分段，然后懸停在另一分段上，則填充方向?qū)?huì)發(fā)生變化。這看起來(lái)很不對(duì)勁。要解決此問(wèn)題，我們可以在懸停時(shí)設(shè)置 z-index 和 clip-path 來(lái)填充這一空間。

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)建填充動(dòng)畫了，也知道如何判斷方向了。那我們應(yīng)該如何將它們放到一起實(shí)現(xiàn)想要的效果呢？答案是同級(jí)選擇器！

當(dāng)我們將鼠標(biāo)懸停在一方向塊上時(shí)，我們可以填充指定的元素。

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

<button>

Boo!

<span></span>

<span></span>

<span></span>

<span></span>

<b>Boo!</b>

<b>Boo!</b>

<b>Boo!</b>

<b>Boo!</b>

</button>

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

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

}

最后一步是鼠標(biāo)懸停在對(duì)應(yīng)方向塊時(shí)更新對(duì)應(yīng)元素的 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);

}

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

可訪問(wèn)性

當(dāng)按鈕不可訪問(wèn)里，會(huì)顯示如下?tīng)顟B(tài)。

這些額外的元素使屏幕閱讀器重復(fù)閱讀了四次。所以，我們需要將它們隱藏起來(lá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實(shí)現(xiàn)具有方面感知的幽靈按鈕”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享標(biāo)題：如何使用CSS實(shí)現(xiàn)具有方面感知的幽靈按鈕
文章URL：http://www.chinadenli.net/article42/ighpec.html

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

廣告

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