使用旋转发光动画创建引人注目的按钮效果

有没有想过网站如何创建那些具有发光、旋转效果的引人注目的按钮？这些效果可以吸引用户并提升网站的 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中文网其他相关文章！