Astuces CSS : parlez de nombres aléatoires en CSS

Récemment, j'ai rencontré un problème intéressant par accident. Je souhaite définir la valeur de durée d'animation de manière aléatoire. Voici un exemple non aléatoire :

Découvrez cet exemple de nombres aléatoires CSS n°1 par Robin Rendle (@robinrendle) sur CodePen.

C'est une animation que j'ai écrite en CSS :

@keyframes flicker {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }}#red {
  animation: flicker 2s ease alternate infinite;}

Elle fonctionne actuellement bien Mais il n'y a pas de randomisation ici, et le temps d'exécution de l'animation est fixé à 2s.

L'animation que je souhaite est un nombre aléatoire dont le temps d'exécution est inférieur à 2 secondes. L'effet que je souhaite est le suivant :

.element {
  animation: flicker $randomNumber alternate infinite;}

Le $randomNumber ici est un nombre aléatoire généré par une fonction spécifique.

Les préprocesseurs CSS tels que Sass fournissent une telle fonction :

$randomNumber: random(5);.thing {
  animation-duration: $randomNumber + s;}

C'est peut-être ce que vous voulez, mais ce n'est pas ce que je veux. Le préprocesseur génère de l'aléatoire. Il y a un défaut évident. le processus de numérotation :

Dans Sass, le processus de génération de nombres aléatoires est comme le processus de sélection d'un nom dans une histoire. Il n'est retiré qu'au hasard après l'écriture, puis il ne change plus.

En d'autres termes, une fois le préprocesseur CSS exécuté, le processus de randomisation est terminé et le nombre aléatoire généré sera fixé à une valeur pour toujours (c'est-à-dire jusqu'à ce que le préprocesseur CSS soit à nouveau exécuté. Il sera régénéré . )

Il ne génère pas de nombres aléatoires lorsque JavaScript est exécuté comme les fonctions aléatoires de JavaScript (telles que Math.random()).

Bien que profondément désolé, j'ai également réalisé que c'était l'occasion idéale d'utiliser des variables CSS (les propres propriétés de CSS) ! Même si l’utiliser pour générer des nombres aléatoires n’est pas une tâche facile, ils peuvent quand même nous aider.

Si vous ne les connaissez pas, ne vous inquiétez pas. En fait, les variables CSS sont intégrées et sont différentes des variables que vous connaissez déjà des préprocesseurs CSS comme SASS et LESS. Découvrez les nombreux avantages que Chris énumère ici :

Vous pouvez les utiliser sans utiliser de prétraitement.

Ils sont en cascade. Vous pouvez définir la valeur de cette variable ou remplacer la référence de variable actuelle dans n'importe quel sélecteur.

Lorsque leurs valeurs changent (comme des requêtes multimédias ou d'autres changements d'état), le navigateur sera à nouveau rendu

Vous pouvez y accéder et les manipuler à l'aide de JavaScript.

Le dernier point est important pour nous. Nous générons des nombres aléatoires en JavaScript et définissons les valeurs générées sur des variables CSS.

Définissez une propriété personnalisée CSS et attribuez-lui une valeur par défaut (cela est utile en cas d'échec de JavaScript pour une raison quelconque lors de l'écriture de la valeur) :

/* 设置默认的动画执行时间 */:root {
  --animation-time: 2s; }

Nous pouvons maintenant utiliser cette variable dans CSS comme ceci :

#red {
  animation: flicker var(--animation-time) ease alternate infinite;}

Sans plus tarder, commençons immédiatement. Bien que celle-ci ressemble à l'une des animations SVG précédentes, celle-ci est écrite à l'aide de variables CSS. Vous pouvez modifier la valeur de la variable pour tester son fonctionnement. Et prévisualisez l’effet en temps réel.

Maintenant, nous utilisons JavaScript pour accéder et manipuler cette variable :

var time = Math.random();

Ici, nous pouvons trouver le cercle rouge créé à l'aide de SVG et modifier la valeur de --animation-time à l'aide de setProperty.

var red = document.querySelector('#red');red.style.setProperty('--animation-time', time +'s');

Regardez ici ! Un nombre aléatoire a été défini pour l'élément d'animation SVG :

Regardez cet exemple CSS Random Number #3 écrit par Robin Rendle (@robinrendle) sur CodePen .

Il s'agit d'une grande amélioration par rapport au précédent car sa valeur est un nombre aléatoire généré lors de l'exécution de JavaScript, et il change à chaque fois. Cela permet d'obtenir l'effet souhaité, mais nous avons encore un peu de mal à le faire : animation périodique-durée d'un nombre aléatoire au moment de l'exécution

Heureusement, nous pouvons maintenant utiliser JavaScript, nous La valeur d'une variable personnalisée. peut être mis à jour selon ce que nous voulons. Voici un exemple où nous mettons à jour la valeur de animation-duration chaque seconde :

var red = document.querySelector('#red');function setProperty(duration) {
  red.style.setProperty('--animation-time', duration +'s');}function changeAnimationTime() {
  var animationDuration = Math.random();
  setProperty(animationDuration);}setInterval(changeAnimationTime, 1000);

C'est exactement ce que je veux : Découvrez cet exemple de nombres aléatoires CSS écrits par Robin Rendle (@robinrendle) sur CodePen# 4.

Mais rappelez-vous, la prise en charge des variables CSS (attributs personnalisés) n'est toujours pas très bonne, alors soyez prudent lorsque vous les utilisez. Nous pouvons implémenter une animation d'amélioration progressive comme celle-ci :

#red {
  animation: flicker .5s ease alternate infinite;
  animation: flicker var(--animation-time) ease alternate infinite;}

Si les variables CSS ne sont pas prises en charge, nous pouvons également voir une partie de l'animation, même si ce n'est pas l'aspect parfait à mon avis.

Heureusement, les variables CSS ne sont pas le seul moyen de générer des valeurs aléatoires de durée d'animation. Nous pouvons utiliser JavaScript pour manipuler le DOM et définir la valeur directement sur le style :

var red = document.querySelector('#red');red.style.animationDuration = Math.floor(Math.random() * 5 + 1) + "s";

Nous pouvons même attendre la fin de l'animation avant de définir une nouvelle heure, si nous voulons un tel effet :

var red = document.querySelector('#red');function setRandomAnimationDuration() {
  red.style.animationDuration = Math.floor(Math.random() * 10 + 1) + "s";}red.addEventListener("animationiteration", setRandomAnimationDuration);

Ceci n'est qu'une liste de façons possibles d'y parvenir. Vous pouvez également utiliser EQCSS pour obtenir cet effet :

@element '#animation' {
  .element {
    animation-duration: eval('rand')s;
  }}

var rand = Math.random();EQCSS.apply();

Voulez-vous que CSS lui-même puisse le faire. générer des nombres aléatoires corrects ? Je n'ai pas vu d'informations pertinentes jusqu'à présent. Même s'il y en a, cela peut me prendre un certain temps avant de pouvoir réellement les utiliser

Pour plus de compétences CSS : parlez des nombres aléatoires en CSS, veuillez faire attention à PHP pour les articles connexes Site Web chinois !