Comment utiliser le mélange d'images CSS3

Nous savons qu'avec l'aide de la puissante fonction d'effets spéciaux de CSS3, le mode de fusion peut permettre aux images de produire des effets époustouflants. Le mode de fusion fait référence à diverses méthodes utilisées pour mélanger l'image supérieure dans l'image inférieure. mode, jetons un œil au cas ci-dessous

1. transform-origin

L'origine de la transformation CSS, la valeur par défaut est le point central de l' objet . transform-origin accepte deux paramètres, qui peuvent être des valeurs spécifiques telles que pourcentage, em, px, etc., ou des mots-clés tels que gauche, droite, centre, haut, milieu, bas, etc.

Par exemple :

transform-origin : en haut à droite;-o-transform-origin : en haut à droite;-moz-transform-origin : en haut à droite;-webkit-transform-origin : en haut à droite ;

transform-origin: 0 0;-o-transform-origin: 0 0;-moz-transform-origin: 0 0;-webkit-transform-origin: 0 0;

transform-origin : 0 100 %;-o-transform-origin : 0 100 %;-moz-transform-origin : 0 100%;-webkit-transform-origin : 0 100%;

transform- origine : 50% 100%;-o-transform-origin: 50% 100%;-moz-transform-origin: 50% 100%;-webkit-transform-origin: 50% 100%;

2 . transition--Transition

1.transition-property : définit le nom de la propriété CSS de la transition animation . Peut être aucun|tout|liste de propriétés CSS.

Par exemple :

transition-property:background-color;-o-transition-property:background-color;-moz-transition-property:background-color ; -webkit-transition-property:background-color;

2.transition-duration : Définit la durée de l'animation de transition.

Par exemple :

durée-transition : 3s;-o-durée-transition : 3s;-moz-durée-transition : 3s;-webkit-durée-transition : 3s;

3.transition-delay : Définissez le temps de retard de l'animation de transition.

Par exemple :

délai de transition : 3 s;-o-délai de transition : 3 s;-moz-délai de transition : 3 s;-webkit-délai de transition : 3 s;

4.transition-timing-function : Définir l'effet de l'animation de transition.

La valeur peut être :

facilité : effet de relief.

easy-in : Effet dégradé.

ease-out : effet de fondu.

ease-in-out : effet de fondu d'entrée et de sortie.

linéaire : effet linéaire.

cubic-bezier : effet spécial courbe de Bézier cubique. cubique-bézier(0,3, 0, 0,5, 1,0).

Par exemple :

fonction de synchronisation de transition : linéaire ; -o-fonction de synchronisation de transition : linéaire;-moz-transition-timing-function : linéaire;-webkit-transition- timing -function : linéaire ;

3. animation

1. animation-name : nom de l'animation.

2.animation-durée : durée de l'animation.

3.animation-timing-function : méthode de lecture d'animation.

4.animation-delay : heure de début de l'animation.

5.animation-iteration-count : Nombre de lectures. infini signifie des temps infinis. .

6.animation-direction : sens de lecture de l'animation. normal : chaque cycle d'animation avance en alternance : les temps pairs avancent, les temps impairs reculent.

Par exemple :

div {

-webkit-transform-style: preserve-3d;
-webkit-animation-name: ani;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
/* 下面调用动画 */
@-webkit-keyframes ani {
0% {
-webkit-transform: rotateX(0deg);
}
25% {
-webkit-transform: rotateX(180deg);
}
50% {
-webkit-transform: rotateX(360deg);
}
75% {
-webkit-transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(360deg);
}

Je crois que vous maîtrisez la méthode après avoir lu ces cas. Veuillez faire attention. pour des choses plus excitantes. Autres articles connexes sur le site Web chinois php !

Lecture connexe :

Tutoriel sur l'utilisation de l'attribut transform en CSS3

Introduction détaillée à l'attribut translation en CSS3

Plusieurs façons de se positionner dans les projets front-end

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!