有没有想过网站是如何创建那些具有发光，旋转效果的醒目按钮的？这些效果提升您网站的吸引力。让我们探索如何使用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;
}
它看起来像这样:
步骤2：添加渐变效果
现在，我们来讨论一种特殊的梯度，叫做圆锥梯度。你听说过吗？线性渐变沿沿着直线平滑过渡颜色，径向渐变从圆心向外混合颜色，而圆锥渐变围绕中心点过渡颜色，形成圆形或类似圆锥的图案。
看看下面的区别：
我们使用圆锥梯度来实现这种效果。把它加到按钮上:
CSS代码片段涉及圆锥渐变，并使用border-box作为背景大小。
圆锥梯度分解
from0：渐变从0度角（圆的顶部）开始，顺时针进行。
transparent: 渐变从完全透明的颜色开始。
white 10%: 在总渐变周长的10%处，颜色过渡为白色。
transparent 20%: 在渐变周长的20%处，它过渡回透明。
border-box：渐变适用于包元素的内容、填充和边框的区域。这意味着渐变将覆盖整个元素的框，直到边框的外边缘。
应用此效果后，按钮将如下所示:
现在，我们将使用这个圆锥渐变作为按钮的渐变边界。我们怎么才能做到这一点？
background: linear-gradient(black, black) padding-box,
conic-gradient(from 0, transparent, white 10%, transparent 20%) border-box;
按钮是这样的：
步骤3：设置渐变动画
我们已经添加了闪亮的效果到我们的按钮！现在让动画动起来，我们需要一点JavaScript。但首先，我们将更新CSS，使其更加灵活和动态。
background: linear-gradient(black, black) padding-box,
conic-gradient(
from var(--angle, 0),
transparent,
white 10%,
transparent 20%
)
border-box;
们引入了一个名为--angleCSS变量。from var（--angle，0）表示如果--angle值未定义，默认值为0，与之前相同。现在，我们将通过JavaScript将这个-angle值从0更改为360。因此，锥形渐变将从0度移动到360度，并产生发光的旋转效果。现在让我们看看JavaScript部分：
document.addEventListener("DOMContentLoaded", () => {
const element = document.querySelector(".rotating");
let angle = 0;
const rotate = () => {
angle = (angle + 1) % 360; // Increment angle and keep it within 0-360
element.style.setProperty("--angle", `${angle}deg`);
requestAnimationFrame(rotate);
};
rotate();
});
我们得到了最终的结果：
