使用旋轉發光動畫創造引人注目的按鈕效果

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

第 1 步：建立按鈕佈局

我們先來製作一個簡單的按鈕-

<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步：新增漸層效果

現在，我們來談談一種特殊的梯度，稱為圓錐梯度。你聽過嗎？線性漸層沿著直線平滑過渡顏色，徑向漸層從圓心向外混合顏色，而圓錐漸層則圍繞中心點過渡顏色，形成圓形或圓錐狀圖案。這是創建動態且視覺上有趣的設計的獨特方式。

看看下面的差別-

我們將使用圓錐漸層來實現此效果。讓我們將其添加到我們的按鈕中 -

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

CSS 片段涉及圓錐漸變並使用邊框框調整背景大小。以下是所發生事件的詳細說明：

圓錐曲線梯度分解

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

從 0 開始： 漸層從 0 度角（圓的頂部）開始並順時針方向進行。

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

白色 10%： 在總漸變週長的 10% 處，顏色轉換為白色。

透明 20%： 在漸變週長的 20% 處，它會過渡回透明。

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

邊框

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

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

現在，我們將使用這個圓錐漸層作為按鈕的漸變邊框。我們怎樣才能做到這一點？

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

<button>WHY CHOOSE US</button>

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

第 3 步：動畫漸層

我們為按鈕添加了閃亮的發光效果！現在，讓我們讓它動起來。為此，我們需要一點 JavaScript。但首先，我們將更新 CSS，使其更加靈活和動態。

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

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

這裡，與上一節唯一的區別是，我們引入了一個名為 --angle 的 CSS 變數。 [from var(--angle, 0) 表示如果 --angle 值未定義，則預設值為 0，與之前相同。 ] 現在我們將這個 ---angle 值從 0 改為360 通過 JavaScript。結果，圓錐曲線梯度將從 0 度移動到 360 度，並產生發光的旋轉效果。現在讓我們來看看 JavaScript 部分 -

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

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

它的作用：
保持動畫流暢：它將動畫與螢幕的更新率（通常為每秒 60 幀）同步，因此動畫看起來不會斷斷續續。

節省電力：當使用者切換到另一個標籤時暫停動畫，節省資源。

在完美的時間調用您的函數：它告訴您的動畫邏輯何時需要更新，因此一切保持同步。

工作原理：
您為 requestAnimationFrame 提供一個要呼叫的函數（通常是您的動畫邏輯）。它在瀏覽器在螢幕上繪製下一幀之前運行此函數。

然後，我們得到了最終結果。請參閱下面的 Codepen 以取得逐步變更-

現在您已經使用 CSS 和 JavaScript 建立了一個發光的旋轉按鈕！隨意調整漸變、動畫速度（知道我們該怎麼做嗎？將其留在評論中。），甚至添加您自己的自訂效果。這些技術是讓您的 UI 脫穎而出的好方法。

想要更多創意 Javascript 動畫或 CSS 按鈕效果的創意嗎？請在評論中告訴我，並敬請關注下一篇文章！

你也可以在這裡找到我-

X
領英

以上是使用旋轉發光動畫創造引人注目的按鈕效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！