So verwenden Sie CSS3-Bildmischung

Wir wissen, dass der Mischmodus mithilfe der leistungsstarken Spezialeffektfunktion von CSS3 dazu führen kann, dass Bilder atemberaubende Effekte erzeugen. Der Mischmodus bezieht sich auf verschiedene Methoden, mit denen das obere Bild in das untere Bild gemischt wird. Schauen wir uns den folgenden Fall an

1. transform-origin

Der Ursprung der CSS-Transformation, der Standardwert ist der Mittelpunkt des Objekts . transform-origin akzeptiert zwei Parameter, bei denen es sich um bestimmte Werte wie Prozentsatz, em, px usw. oder Schlüsselwörter wie links, rechts, Mitte, oben, Mitte, unten usw. handeln kann.

Zum Beispiel:

transform-origin: oben rechts;-o-transform-origin: oben rechts;-moz-transform-origin: oben rechts;-webkit-transform-origin: oben richtig ;

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- Herkunft: 50 % 100 %;-o-transform-origin: 50 % 100 %;-moz-transform-origin: 50 % 100 %;-webkit-transform-origin: 50 % 100 %;

2 . Transition--Transition

1.transition-property: Definiert den CSS-Eigenschaftsnamen der Übergangsanimation . Kann none|all|CSS-Eigenschaftsliste sein.

Zum Beispiel:

transition-property:

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

2.transition-duration: Definieren Sie die Länge der Übergangsanimation.

Zum Beispiel:

transition-duration: 3s;-o-transition-duration: 3s;-moz-transition-duration: 3s;-webkit-transition-duration: 3s;

3.Übergangsverzögerung: Definieren Sie die Verzögerungszeit der Übergangsanimation.

Zum Beispiel:

transition-delay: 3s;-o-transition-delay: 3s;-moz-transition-delay: 3s;-webkit-transition-delay: 3s;

4.Übergangszeitfunktion: Definieren Sie den Effekt der Übergangsanimation.

Der Wert kann sein:

ease: Linderungseffekt.

ease-in: Verlaufseffekt.

ease-out: Fade-Effekt.

ease-in-out: Ein- und Ausblendeffekt.

linear: linearer Effekt.

Cubic-Bezier: spezieller kubischer Bezier-Kurveneffekt. Kubikbezier (0,3, 0, 0,5, 1,0).

Zum Beispiel:

transition-timing-function: linear; -o-transition-timing-function: linear;-moz-transition-timing-function: linear;-webkit-transition- Timing-Funktion: linear;

3. Animation

1.

2.animation-duration: Animationszeit.

3.animation-timing-function: Animationswiedergabemethode.

4.Animationsverzögerung: Startzeit der Animation.

5.animation-iteration-count: Anzahl der Spiele. unendlich bedeutet unendliche Zeiten. .

6.animation-

Richtung: Richtung der Animationswiedergabe. normal – jeder Animationszyklus geht abwechselnd vorwärts – gerade mal vorwärts, ungerade mal rückwärts.

Zum Beispiel:

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);
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie diese Fälle gelesen haben. Bitte achten Sie darauf für weitere spannende Dinge auf der chinesischen PHP-Website!

Verwandte Lektüre:

Tutorial zur Verwendung des Transformationsattributs in CSS3

Detaillierte Einführung in das Translateattribut in CSS3

Mehrere Möglichkeiten zur Positionierung in Front-End-Projekten

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS3-Bildmischung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!