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

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

我們先來(lái)制作一個(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 ... */

它看起來(lái)像這樣-

第2步：添加漸變效果

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

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

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

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

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

圓錐曲線梯度分解

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

從 0 開始： 漸變從 0 度角（圓的頂部）開始并順時(shí)針?lè)较蜻M(jìn)行。

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

白色 10%： 在總漸變周長(zhǎng)的 10% 處，顏色過(guò)渡為白色。

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

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

邊框

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

應(yīng)用此效果后，按鈕將如下所示 -

現(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)容和填充。我們之前添加的圓錐曲線一直延伸到邊界。由于邊框是透明的，我們可以通過(guò)邊框看到圓錐漸變的 2px 厚度?，F(xiàn)在，按鈕看起來(lái)像這樣 -

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

我們?yōu)榘粹o添加了閃亮的發(fā)光效果！現(xiàn)在，讓我們讓它動(dòng)起來(lái)。為此，我們需要一點(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 變量。 [from var(--angle, 0) 意味著如果 --angle 值未定義，則默認(rèn)值為 0，與之前相同。] 現(xiàn)在我們將這個(gè) ---angle 值從 0 更改為360 通過(guò) JavaScript。結(jié)果，圓錐曲線梯度將從 0 度移動(dòng)到 360 度，并產(chǎn)生發(fā)光的旋轉(zhuǎn)效果。現(xiàn)在讓我們看看 JavaScript 部分 -

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

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

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

節(jié)省電量：當(dāng)用戶切換到另一個(gè)選項(xiàng)卡時(shí)暫停動(dòng)畫，節(jié)省資源。

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

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

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

現(xiàn)在您已經(jīng)使用 CSS 和 JavaScript 創(chuàng)建了一個(gè)發(fā)光的旋轉(zhuǎn)按鈕！隨意調(diào)整漸變、動(dòng)畫速度（知道我們?cè)撛趺醋鰡?？將其留在評(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)文章！