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

第 1 步：創(chuàng)建按鈕布局

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

<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)在，我們來談談一種特殊的梯度，稱為圓錐梯度。你聽說過嗎？線性漸變沿直線平滑過渡顏色，徑向漸變從圓心向外混合顏色，而圓錐漸變則圍繞中心點過渡顏色，形成圓形或圓錐狀圖案。這是創(chuàng)建動態(tài)且視覺上有趣的設計的獨特方式。

看看下面的區(qū)別-

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

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

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

圓錐曲線梯度分解

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

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

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

白色 10%： 在總漸變周長的 10% 處，顏色過渡為白色。

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

此圖案創(chuàng)建了一個被透明包圍的白色“切片”。

邊框

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

應用此效果后，按鈕將如下所示 -

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

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

<button>WHY CHOOSE US</button>

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

第 3 步：動畫漸變

我們?yōu)榘粹o添加了閃亮的發(fā)光效果！現(xiàn)在，讓我們讓它動起來。為此，我們需要一點 JavaScript。但首先，我們將更新 CSS，使其更加靈活和動態(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ū)別是，我們引入了一個名為 --angle 的 CSS 變量。 [from var(--angle, 0) 意味著如果 --angle 值未定義，則默認值為 0，與之前相同。] 現(xiàn)在我們將這個 ---angle 值從 0 更改為360 通過 JavaScript。結(jié)果，圓錐曲線梯度將從 0 度移動到 360 度，并產(chǎn)生發(fā)光的旋轉(zhuǎn)效果。現(xiàn)在讓我們看看 JavaScript 部分 -

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

操作非常簡單。加載 DOM 內(nèi)容后，我們調(diào)用一個名為rotate()的函數(shù)。該函數(shù)在每次迭代時將角度增加 1，并將該值設置為按鈕的 CSS 變量 --angle。這最終改變了圓錐曲線的位置。我們使用名為 requestAnimationFrame 的內(nèi)置函數(shù)迭代調(diào)用此函數(shù)。這是一個特殊的 Javascript 函數(shù)，如 setInterval 或 setTimeOut。讓我們詳細了解一下 requestAnimationFrame 函數(shù) -

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

節(jié)省電量：當用戶切換到另一個選項卡時暫停動畫，節(jié)省資源。

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

工作原理：
您為 requestAnimationFrame 提供一個要調(diào)用的函數(shù)（通常是您的動畫邏輯）。它在瀏覽器在屏幕上繪制下一幀之前運行此函數(shù)。

然后，我們得到了最終結(jié)果。請參閱下面的 Codepen 以獲取逐步更改-

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

想要更多創(chuàng)意 Javascript 動畫或 CSS 按鈕效果的創(chuàng)意嗎？請在評論中告訴我，并敬請關注下一篇博文！

你也可以在這里找到我-

X
領英

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