Introduction aux propriétés associées du CSS pour obtenir des effets dynamiques d'images

CSS réalise l'effet dynamique de image.

Méthode d'utilisation Utiliser le survolpseudo-classe

Processus de fonctionnement Déterminez d'abord l'effet à obtenir et définissez la représentation initialeÉtat

Csspropriétés utilisées dans l'animation

propriété de transition

transition-property spécifie les propriétés CSS pour définir la transition effet nom.

(

aucun Aucune propriété n'obtiendra l'effet de transition.

toutes Toutes les propriétés obtiendront l'effet de transition.

propriété définition Liste des noms de propriétés CSS pour appliquer l'effet de transition, séparés par des virgules

)

transition-duration spécifie le nombre de secondes ou de millisecondes nécessaires pour terminer l'effet de transition.

transition-timing-function spécifie la courbe de vitesse de l'effet de vitesse.

(

linéaire spécifie un effet de transition qui commence et se termine à la même vitesse (égale à cubique-bézier(0,0,1,1)).

facilité spécifie une vitesse lente Un effet de transition qui commence, puis devient rapide, puis se termine lentement (cubic-bezier(0.25,0.1,0.25,1))

ease-in spécifie un effet de transition qui commence à une vitesse lente speed (égal à cube-bézier). (0.42,0,1,1)).

ease-out spécifie un effet de transition qui se termine à une vitesse lente (égale à cube-bézier(0,0, 0.58,1)). easy-in-out spécifie un effet de transition qui commence et se termine à une vitesse lente (égale à cubique-bézier(0.42,0,0.58,1)) dans

cubique-bézier( n,n,n,n). Définissez votre propre valeur dans la fonction cubique-bézier

. Les valeurs possibles sont des valeurs comprises entre 0 et 1. )

transition-delay définit le moment où l'effet de transition commence. L'attribut

trans

for

m applique une transformation 2D ou 3D à un élément. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément.

translateX(x) définit une transformation, en utilisant simplement la valeur de l'axe X.

translateY(y) définit la transformation, en utilisant simplement la valeur de l'axe Y.

scale(x,y) définit une transformation de mise à l'échelle 2D.

scaleX(x) Définit une transformation de mise à l'échelle en définissant la valeur de l'axe X.

scaleY(y) Définit la transformation de mise à l'échelle en définissant la valeur de l'axe Y.

rotate3d(x,y,z,angle) définit la rotation 3D.

rotateX(angle) définit la rotation 3D le long de l'axe X

rotateY(angle) définit la rotation 3D le long de l'axe Y

rotateZ(angle) définit le long de la rotation 3D Z de l'axe

rotate(angle) définit la rotation 2D, en spécifiant l'angle dans le paramètre. Définissez transform-origin (rotation center point)

skew(x-angle,y-angle) pour définir une transformation d'inclinaison 2D le long des axes X et Y.

skewX(angle) définit une transformation d'inclinaison 2D le long de l'axe X.

skewY(angle) définit la transformation d'inclinaison 2D le long de l'axe Y.

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!