渐变已经成为 CSS 频谱的一部分已经有一段时间了。 我们在很多项目中看到了很多径向和线性渐变，但是有一种渐变似乎有点孤单： 圆锥梯度. 我们将使用这种渐变制作表盘。
使用圆锥渐变
我们正在制作的内容包括一个渐变，其颜色过渡围绕中心点旋转，并且可以具有多个颜色值。 为了让这个时钟工作，我们还将使用定义旋转或起点的圆锥梯度的角度值。 角度是通过使用 from 计算值。
background-image: conic-gradient(from 45deg, #6e7dab, #5762d5);有趣的是，CSS 中的起始角度可以为负值，稍后会派上用场。
一个简单优雅的锥形渐变示例：
构建我们的基本时钟
让我们首先为时钟和指针添加一些 HTML：
让我们为我们的时钟创建一些默认样式。 为了让它正常工作，我们稍后会用 JavaScript 更新 CSS 变量，所以让我们在我们的 .clock 选择器。 为了方便调整，让我们也添加手的颜色。
.clock {
/* general clock vars */
--hour-hand-color: #000;
--hour-hand-degrees: 0deg;
--minute-hand-color: #000;
--minute-hand-degrees: 0deg;
--second-hand-color: hotpink;
--second-hand-degrees: 0deg;
position: relative;
min-width: 320px;
width: 25vw;
height: 25vw;
min-height: 320px;
border-radius: 50%;
margin: 0 auto;
border: 7px solid #000;
}
/* clock hands */
.hand {
position: absolute;
left: 50%;
bottom: 50%;
height: 45%;
width: 4px;
margin-left: -2px;
background: var(--second-hand-color);
border-radius: 6px;
transform-origin: bottom center;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
.second-hand {
transform: rotate(var(--second-hand-degrees));
}
.hour-hand {
height: 35%;
border-radius: 40px;
background-color: var(--hour-hand-color);
transform: rotate(var(--hour-hand-degrees));
}
.minute-hand {
height: 50%;
background: var(--minute-hand-color);
transform: rotate(var(--minute-hand-degrees));
}这为我们设置了时钟所需的一般样式。 我们已经设置 transform-origin 在指针上，以便它们正确地围绕时钟的表面旋转。 那里还有一些自定义属性来设置指针的角度，我们将使用 JavaScript 更新这些属性以使时间恰到好处，以便每只指针相应地映射到秒、分钟和小时。
这是我们到目前为止所拥有的：
好的，让我们继续更新这些自定义属性！
为我们的基本时钟添加 JavaScript
首先，我们将定位我们的时钟并创建一个函数：
const clock = document.getElementById("clock");
function setDate() {
// Code to set the current time and hand angles.
}
setDate();在我们的函数内部，我们将使用 Date() 功能 计算手的正确角度：
const now = new Date();
const secondsAngle = now.getSeconds() * 6;
const minsAngle = now.getMinutes() * 6 + secondsAngle / 60;
const hourAngle = ((now.getHours() % 12) / 12) * 360 + minsAngle / 12;以下是此计算的工作原理：
- 秒： 我们用 60 秒乘以
6，这恰好是360，一个完整的圆中的完美角度数。 - 分钟： 与秒相同，但现在我们添加秒角并将其除以
60在一分钟内稍微增加角度以获得更准确的结果。 - 时间： 首先，我们计算小时的剩余时间并将其除以
12. 然后我们将余数除以12再次得到一个十进制值，我们可以乘以360. 例如，当我们在第 23 个小时时，23 / 12 =remain11. 将其除以 12，我们得到0.916然后乘以360总共330. 在这里，我们将做与分钟相同的事情，并添加分钟角度，除以12，以获得更准确的结果。
现在我们有了角度，剩下要做的就是通过在函数末尾添加以下内容来更新时钟的变量：
clock.style.setProperty("--second-hand-degrees", secondsAngle + "deg");
clock.style.setProperty("--minute-hand-degrees", minsAngle + "deg");
clock.style.setProperty("--hour-hand-degrees", hourAngle + "deg");最后但并非最不重要的一点是，我们将以一秒的间隔触发该函数以获取工作时钟：
const clock = document.getElementById("clock");
function setDate() {
// etc.
}
// Tick tick tick
setInterval(setDate, 1000);
setDate();查看我们基本时钟的工作演示：
将此应用于锥形渐变
好的，所以我们时钟的指针正在工作。 我们真正想要的是将它们映射到随时间变化而更新的锥形梯度。 如果您的 Apple Watch 的“渐变”面处于活动状态，您可能会看到相同的效果：
为此，让我们首先更新我们的 .clock 具有圆锥渐变的元素和两个控制开始和结束角度的自定义属性：
.clock {
/* same as before */
/* conic gradient vars */
--start: 0deg;
--end: 0deg;
/* same as before */
background:
conic-gradient(
from var(--start),
rgb(255 255 255) 2deg,
rgb(0 0 0 / 0.5) var(--end),
rgb(255 255 255) 2deg,
rgb(0 0 0 / 0.7)
);
}你可以玩弄一下，按照你喜欢的方式来设计它。 我根据自己的喜好在渐变中添加了一些额外的颜色，但只要你有一个起点和一个终点，你就可以开始了。
接下来，我们将更新我们的 setDate() 函数，以便它更新我们在圆锥梯度上的起点和终点的变量。 起点将是我们的秒针，它很容易找到，因为它与我们的分钟角度相同。 为了在时针上结束，我们应该使我们的结束点与 hourAngle 脚本中的变量，但从中减去我们的起点。
let startPosition = minsAngle;
let endPosition = hourAngle - minsAngle;现在我们可以再次使用 JavaScript 更新我们的变量：
clock.style.setProperty("--start", startPosition + "deg");
clock.style.setProperty("--end", endPosition + "deg");看起来我们可以在这一点上完成，但有一个问题！ 只要分针的角度小于时针，这种计算就可以正常工作。 当分针越过它时，我们的圆锥梯度会变得混乱。 为了解决这个问题，我们将使用负值作为起点。 幸运的是，当这种情况发生时很容易发现。 在更新我们的变量之前，我们将添加以下内容：
if (minsAngle > hourAngle) {
startPosition = minsAngle - 360;
endPosition = hourAngle - startPosition;
}通过减去 360 从我们的分钟角度，我们可以为我们的 startposition 多变的。 由于这个负起点，我们的结束位置应该由小时角更新，减去开始位置。
我们开始了——现在时针和分针设置为渐变角度：
而已！ 但不要让这阻止你更进一步。 创建您自己的样式并在评论中与我分享，以便我查看它们。以下是一些启发您前进的灵感：
