Création d'une horloge avec les nouvelles fonctions de trigonométrie CSS Sin () et Cos ()

Les nouvelles fonctionnalités de CSS: sin () et cos () fonctions trigonométriques créent des effets d'horloge

Les dernières versions de Firefox et Safari ont pris en charge les fonctions trigonométriques CSS! Cela apporte de puissantes capacités informatiques mathématiques à CSS et élargit les possibilités infinies. Ce tutoriel se concentrera sur les fonctions SIN () et cos () et créera une horloge à l'aide. Alors que d'autres fonctions trigonométriques telles que tan () arrivent bientôt, SIN () et les fonctions cos () sont bien adaptées au but d'organiser du texte le long de la circonférence, qui a été implémentée par Chris en utilisant Sass Mixin sur CSS-Tricks il y a six ans, réimplémentons-le avec les dernières technologies.

Effet cible (actuellement pris en charge uniquement par Firefox et Safari):

Nous organisons des caractères de texte le long de la circonférence pour former un visage d'horloge. La structure HTML initiale est la suivante:

<div class="clock">
  <div class="clock-face">
    <time datetime="12:00">12</time><time datetime="1:00">1</time><time datetime="2:00">2</time><time datetime="3:00">3</time><time datetime="4:00">4</time><time datetime="5:00">5</time><time datetime="6:00">6</time><time datetime="7:00">7</time><time datetime="8:00">8</time><time datetime="9:00">9</time><time datetime="10:00">10</time><time datetime="11:00">11</time>
  </div>
</div>

Ensuite, ajoutez le style de base au conteneur .clock, utilisez la balise <time></time> et ajoutez l'attribut datetime:

.clock {
  --_ow: clamp(5rem, 60vw, 40rem);
  --_w: 88cqi;
  aspect-ratio: 1;
  background-color: tomato;
  border-radius: 50%;
  container-type: inline;
  display: grid;
  height: var(--_ow);
  place-content: center;
  position: relative;
  width: var(--_ow);
}

Il s'agit simplement de créer des formes de base et des couleurs d'arrière-plan pour faciliter l'observation des effets. Notez que nous stockons la valeur de largeur dans la variable CSS et sera utilisé plus tard.

Maintenant, ajoutez une variable --_r pour stocker le rayon du cercle, qui est égal à la moitié de la largeur du cercle, et implémentez en utilisant la fonction calc():

.clock {
  --_w: 300px;
  --_r: calc(var(--_w) / 2);
  /* rest of styles */
}

Calcul mathématique: La circonférence est à 360 degrés, l'horloge a 12 nombres, chaque chiffre est espacé de 30 degrés (360/12). Mathématiquement, le cercle commence à 3 heures, donc 12 heures est en fait de -90 degrés, qui est de 270 degrés (360 - 90).

Ajouter une variable --_d Définissez la valeur de degré de chaque nombre, incréments en 30 degrés:

.clock time:nth-child(1) { --_d: 270deg; }
.clock time:nth-child(2) { --_d: 300deg; }
.clock time:nth-child(3) { --_d: 330deg; }
/* ... rest of the numbers ... */

Maintenant, utilisez les fonctions sin () et cos () pour calculer les coordonnées x et y de chaque numéro:

x Formule de coordonnées: rayon (rayon * cos (degré))

--_x: calc(var(--_r) + (var(--_r) * cos(var(--_d))));

y Formule de coordonnées: rayon (rayon * sin (degré))

--_y: calc(var(--_r) + (var(--_r) * sin(var(--_d))));

Ajouter des styles de base aux nombres afin qu'ils soient absolument positionnés et utilisent les coordonnées calculées:

.clock-face time {
  --_x: calc(var(--_r) + (var(--_r) * cos(var(--_d))));
  --_y: calc(var(--_r) + (var(--_r) * sin(var(--_d))));
  --_sz: 12cqi;
  display: grid;
  height: var(--_sz);
  left: var(--_x);
  place-content: center;
  position: absolute;
  top: var(--_y);
  width: var(--_sz);
}

Afin de positionner plus précisément, lors du calcul du rayon, la taille du nombre doit être soustraite:

--_r: calc((var(--_w) - var(--_sz)) / 2);

Changez la couleur pour la rendre plus belle.

Ensuite, ajoutez l'heure, la minute et la seconde des mains:

Ajouter une structure HTML:

<div class="arm hours"></div>
<div class="arm minutes"></div>
<div class="arm seconds"></div>

Ajouter du style:

.arm {
  /* ... styles ... */
}

.seconds { /* ... styles ... */ }
.minutes { /* ... styles ... */ }
.hours { /* ... styles ... */ }

@keyframes turn { /* ... animation ... */ }

Enfin, utilisez JavaScript pour définir l'heure actuelle:

// ... JavaScript code to set initial time ...

Ajouter un traitement de compatibilité du navigateur:

@supports not (left: calc(1px * cos(45deg))) {
  /* fallback styles */
}

Effet final: une horloge CSS complète! Actuellement, seuls les navigateurs Firefox et Safari sont pris en charge.

De plus, l'horloge peut être transformée en une bibliothèque d'images circulaires ou d'autres modèles créatifs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!