Mélanger les couleurs en CSS pur

Rouge et bleu égal au violet ... non?

Comment exprimer cela dans CSS? Pas facile. Bien qu'il existe un projet de proposition pour la fonction Color-Mix et Chrome montre également un certain intérêt, il ne semble pas être devant vous. Avoir un mélange de couleurs CSS natif sera excellent car il offre plus de flexibilité lorsque les concepteurs travaillent sur les couleurs. Par exemple, une variation de ton d'une seule couleur de base peut être créée pour former une palette de conception.

Mais c'est CSS-Tricks, alors faisons quelques astuces CSS.

Nous avons une fonction calc () dans CSS pour manipuler les nombres . Cependant, il existe peu de moyen de manipuler directement les couleurs, même si certains formats de couleurs tels que HSL () et RGB () sont numériques.

Mélanger les couleurs avec l'animation

Nous pouvons utiliser CSS pour passer entre une couleur et une autre. Cela fonctionne:

 div {
  Contexte: bleu;
  transition: 0,2 s;
}
Div: Hover {
  Contexte: rouge;
}

Voici un exemple d'utilisation de l'animation:

 div {
  Contexte: bleu;
  transition: 0,2 s;
}
Div: Hover {
  Animation: Color-Color 0.2S en avant;
}

@KeyFrames Change-Color {
  à {
    Contexte: rouge;
  }
}

Il s'agit d'une animation infiniment en cours d'exécution où vous pouvez voir les couleurs se déplacer entre le rouge et le bleu. Ouvrez la console et cliquez sur la page - même JavaScript peut vous dire la couleur actuelle à n'importe quel point précis de l'animation.

Alors, que se passe-t-il si nous nous arrêtons au milieu de l'animation? Le mélange de couleurs fonctionne! Il s'agit d'une animation en pause avec une durée de 0,5 seconde pendant 1 seconde, donc c'est à mi-chemin:

Nous le faisons en définissant un retard d'animation de -0,5 s. Quelle est la couleur à moitié entre le rouge et le bleu? Violet. Nous pouvons ajuster le retard d'animation pour spécifier le pourcentage des deux couleurs.

Cela fonctionne avec les navigateurs de noyau de chrome et Firefox. Dans Safari, vous devez changer le nom d'animation pour forcer le navigateur à recalculer les progrès de l'animation.

Cette astuce peut également être utilisée pour ajouter des canaux alpha aux couleurs, ce qui est souvent utile pour les conceptions de thème.

Ajouter des couleurs mélangées aux propriétés personnalisées CSS

Jusqu'à présent, c'est une astuce intelligente, mais il n'est pas pratique d'appliquer l'animation à n'importe quel élément dont vous avez besoin pour utiliser une couleur mixte, puis de définir toutes les propriétés que vous souhaitez modifier dans @KeyFrames.

Si nous ajoutons plusieurs fonctionnalités CSS, nous pouvons améliorer ceci:

1. Utilisez les propriétés personnalisées CSS de type @property afin qu'elles puissent être créées comme couleurs appropriées afin qu'elles puissent être animées sous forme de couleurs.
2. Utilisez SASS @Function pour appeler facilement les images clés à des points spécifiques.

Maintenant, nous devons toujours appeler l'animation, mais le résultat est que nous pouvons utiliser des propriétés personnalisées pour toutes les autres propriétés.

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!