Making a Real-Time Clock With a Conic Gradient Face

CSS gradients offer versatile design options, with radial and linear gradients frequently used. However, conic gradients, while powerful, are often overlooked. This tutorial demonstrates creating a unique clock face leveraging the capabilities of conic gradients.

Understanding Conic Gradients

Conic gradients create color transitions rotating around a central point, supporting multiple color values. Crucially, the from value within the conic-gradient() function defines the rotation or starting point. This angle can even be negative, a feature we'll exploit.

background-image: conic-gradient(from 45deg, #6e7dab, #5762d5);

This simple example showcases the elegance of conic gradients.

Building the Clock Structure

We begin by structuring the HTML for the clock and its hands: (HTML code omitted for brevity, as it's standard clock hand markup).

Next, we style the clock using CSS, employing CSS variables for easy customization. These variables will be dynamically updated with JavaScript.

.clock {
  /* Clock Variables */
  --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 Styles */
.hand {
  /* ... (hand styles omitted for brevity) ... */
}

The transform-origin property ensures correct hand rotation. Custom properties manage hand angles, updated via JavaScript for accurate timekeeping.

Implementing the JavaScript Logic

We select the clock element and define the setDate() function:

const clock = document.getElementById("clock");
function setDate() {
  // Time calculation and hand angle updates
}
setDate(); // Initial setup

Inside setDate(), we calculate hand angles using 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;

The calculations ensure accurate hand positioning, accounting for seconds, minutes, and hours. We then update the CSS variables:

clock.style.setProperty("--second-hand-degrees", secondsAngle   "deg");
clock.style.setProperty("--minute-hand-degrees", minsAngle   "deg");
clock.style.setProperty("--hour-hand-degrees", hourAngle   "deg");

Finally, setInterval(setDate, 1000) updates the clock every second.

Integrating the Conic Gradient

To integrate the conic gradient, we modify the .clock styles:

.clock {
  /* ... (previous styles) ... */
  --start: 0deg;
  --end: 0deg;
  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));
}

We introduce --start and --end variables to control the gradient's start and end angles. The setDate() function is updated to calculate and set these variables, handling cases where minsAngle exceeds hourAngle using negative angles for seamless transitions. (JavaScript code for gradient angle calculations omitted for brevity, as it's a straightforward update of the --start and --end variables based on minsAngle and hourAngle).

This completes the clock with a dynamic conic gradient face. Experiment with different color schemes and styles to create your own unique clock designs.

The above is the detailed content of Making a Real-Time Clock With a Conic Gradient Face. For more information, please follow other related articles on the PHP Chinese website!