Comment créer un flou de mouvement réaliste avec les transitions CSS

La création d'effets de flou de mouvement réalistes dans le CSS implique de comprendre les principes sous-jacents du flou de mouvement lui-même. Cet effet, souvent vu sur des photographies d'objets à évolution rapide ou de photos de caméra tremblantes, est le résultat de la vitesse d'obturation de la caméra capturant le mouvement au fil du temps.

Comprendre le flou du mouvement

L'obturateur d'un appareil photo s'ouvre, permettant à la lumière d'exposer le film (ou le capteur). Si un objet se déplace pendant cette exposition, l'image résultante montre le chemin de l'objet comme un flou. Ce flou est un composite de la position de l'objet à différents moments pendant le temps d'ouverture de l'obturateur. L'objet apparaît semi-transparent, avec des parties du fond visibles à travers elle.

Les ordinateurs simulent cela en créant plusieurs sous-trames de l'objet à des positions légèrement différentes le long de son chemin et en les mélangeant avec une opacité réduite. Plus les sous-trames sont utilisées, plus le flou est réaliste.

Implémentation CSS

Pour y parvenir dans CSS, nous utilisons plusieurs éléments presque identiques, chacun avec une opacité réduite et une animation légèrement retardée.

Commençons par une animation de base, par exemple, un point noir qui se déplace sur le plan de survol: (cette section contiendrait le code CSS initial pour l'animation de points unique).

Pour créer le flou de mouvement, nous reproduisons ce point plusieurs fois (par exemple, 20 copies) en utilisant un positionnement absolu, les chevauchant parfaitement. Chaque copie a réduit son opacité (par exemple, à 10%), et un petit retard est ajouté à son animation à l'aide transition-delay . Ce retard est augmenté progressivement pour chaque copie suivante, créant l'illusion de flou de mouvement. (Cette section contiendrait le code CSS pour l'animation à points multiples avec des retards).

Le nombre de copies, d'opacité et de valeur de retard nécessite un ajustement en fonction de la vitesse d'animation et de l'intensité du flou souhaitée. Alors que 20 exemplaires suffisent souvent, moins peuvent fonctionner pour des animations plus lentes. L'expérimentation est essentielle pour atteindre l'effet optimal.

Cette technique simule efficacement le flou du mouvement pour diverses animations - changements de couleur, mise à l'échelle et horaires complexes - ajoutant une touche professionnelle à vos animations CSS. Bien que les progrès futurs du navigateur puissent offrir des capacités de flou de mouvement natives, cette méthode fournit une solution robuste et facilement disponible.

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!