有沒有想過網(wǎng)站如何創(chuàng)造那些具有發(fā)光、旋轉(zhuǎn)效果的引人注目的按鈕？這些效果可以吸引使用者並提升網(wǎng)站的 UI/UX。讓我們探索如何使用 CSS 和一些 JavaScript 逐步建立它們。

第 1 步：建立按鈕佈局

我們先來製作一個(gè)簡(jiǎn)單的按鈕-

<button>WHY CHOOSE US</button>

button {
  width: 250px;
  height: 80px;
  border-radius: 3rem;
  outline: none;
  background: black;
  border: 2px solid transparent;
  color: white;
  cursor: pointer;
}

/* ... Other styles ... */

它看起來像這樣-

第2步：新增漸層效果

現(xiàn)在，我們來談?wù)勔环N特殊的梯度，稱為圓錐梯度。你聽過嗎？線性漸層沿著直線平滑過渡顏色，徑向漸層從圓心向外混合顏色，而圓錐漸層則圍繞中心點(diǎn)過渡顏色，形成圓形或圓錐狀圖案。這是創(chuàng)建動(dòng)態(tài)且視覺上有趣的設(shè)計(jì)的獨(dú)特方式。

看看下面的差別-

我們將使用圓錐漸層來實(shí)現(xiàn)此效果。讓我們將其添加到我們的按鈕中 -

  background: conic-gradient(from 0, transparent, white 10%, transparent 20%)
    border-box;

CSS 片段涉及圓錐漸變並使用邊框框調(diào)整背景大小。以下是所發(fā)生事件的詳細(xì)說明：

圓錐曲線梯度分解

圓錐曲線（從0開始，透明，白色10%，透明20%）：

從 0 開始： 漸層從 0 度角（圓的頂部）開始並順時(shí)針方向進(jìn)行。

透明：漸變以完全透明的顏色開始。

白色 10%： 在總漸變週長(zhǎng)的 10% 處，顏色轉(zhuǎn)換為白色。

透明 20%： 在漸變週長(zhǎng)的 20% 處，它會(huì)過渡回透明。

此圖案建立了一個(gè)被透明包圍的白色「切片」。

邊框

border-box: 漸層適用於包含元素內(nèi)容、內(nèi)邊距和邊框的區(qū)域。這意味著漸變將覆蓋整個(gè)元素的框，直到邊框的外緣。

套用此效果後，按鈕將如下所示 -

現(xiàn)在，我們將使用這個(gè)圓錐漸層作為按鈕的漸變邊框。我們?cè)鯓硬拍茏龅竭@一點(diǎn)？

我們將在這裡使用盒子大小的力量。我們將為這個(gè)按鈕製作多個(gè)背景。按鈕的頂部背景將是純色背景，其中 padding-box 作為 box-sizing，這意味著它不會(huì)拉伸到邊框。請(qǐng)參閱下面的程式碼-

<button>WHY CHOOSE US</button>

所以，現(xiàn)在我們有一個(gè)黑色背景覆蓋按鈕，包括它的內(nèi)容和填充。我們之前加入的圓錐曲線一直延伸到邊界。由於邊框是透明的，我們可以透過邊框看到圓錐漸變的 2px 厚度。現(xiàn)在，按鈕看起來像這樣 -

第 3 步：動(dòng)畫漸層

我們?yōu)榘粹o添加了閃亮的發(fā)光效果！現(xiàn)在，讓我們讓它動(dòng)起來。為此，我們需要一點(diǎn) JavaScript。但首先，我們將更新 CSS，使其更加靈活和動(dòng)態(tài)。

button {
  width: 250px;
  height: 80px;
  border-radius: 3rem;
  outline: none;
  background: black;
  border: 2px solid transparent;
  color: white;
  cursor: pointer;
}

/* ... Other styles ... */

這裡，與上一節(jié)唯一的區(qū)別是，我們引入了一個(gè)名為 --angle 的 CSS 變數(shù)。 [from var(--angle, 0) 表示如果 --angle 值未定義，則預(yù)設(shè)值為 0，與之前相同。 ] 現(xiàn)在我們將這個(gè) ---angle 值從 0 改為360 通過 JavaScript。結(jié)果，圓錐曲線梯度將從 0 度移動(dòng)到 360 度，並產(chǎn)生發(fā)光的旋轉(zhuǎn)效果?，F(xiàn)在讓我們來看看 JavaScript 部分 -

  background: conic-gradient(from 0, transparent, white 10%, transparent 20%)
    border-box;

操作非常簡(jiǎn)單。載入 DOM 內(nèi)容後，我們呼叫一個(gè)名為rotate()的函數(shù)。函數(shù)在每次迭代時(shí)將角度增加 1，並將該值設(shè)為按鈕的 CSS 變數(shù) --angle。這最終改變了圓錐曲線的位置。我們使用名為 requestAnimationFrame 的內(nèi)建函數(shù)迭代呼叫此函數(shù)。這是一個(gè)特殊的 Javascript 函數(shù)，例如 setInterval 或 setTimeOut。讓我們?cè)敿?xì)了解 requestAnimationFrame 函數(shù) -

它的作用：
保持動(dòng)畫流暢：它將動(dòng)畫與螢?zāi)坏母侣剩ㄍǔ槊棵?60 幀）同步，因此動(dòng)畫看起來不會(huì)斷斷續(xù)續(xù)。

節(jié)省電力：當(dāng)使用者切換到另一個(gè)標(biāo)籤時(shí)暫停動(dòng)畫，節(jié)省資源。

在完美的時(shí)間調(diào)用您的函數(shù)：它告訴您的動(dòng)畫邏輯何時(shí)需要更新，因此一切保持同步。

工作原理：
您為 requestAnimationFrame 提供一個(gè)要呼叫的函數(shù)（通常是您的動(dòng)畫邏輯）。它在瀏覽器在螢?zāi)簧侠L製下一幀之前運(yùn)行此函數(shù)。

然後，我們得到了最終結(jié)果。請(qǐng)參閱下面的 Codepen 以取得逐步變更-

現(xiàn)在您已經(jīng)使用 CSS 和 JavaScript 建立了一個(gè)發(fā)光的旋轉(zhuǎn)按鈕！隨意調(diào)整漸變、動(dòng)畫速度（知道我們?cè)撛觞N做嗎？將其留在評(píng)論中。），甚至添加您自己的自訂效果。這些技術(shù)是讓您的 UI 脫穎而出的好方法。

想要更多創(chuàng)意 Javascript 動(dòng)畫或 CSS 按鈕效果的創(chuàng)意嗎？請(qǐng)?jiān)谠u(píng)論中告訴我，並敬請(qǐng)關(guān)注下一篇文章！

你也可以在這裡找到我-

X
領(lǐng)英

以上是使用旋轉(zhuǎn)發(fā)光動(dòng)畫創(chuàng)造引人注目的按鈕效果的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！