Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie CSS3-Bildmischung

So verwenden Sie CSS3-Bildmischung

php中世界最好的语言
php中世界最好的语言Original
2017-12-01 11:30:141770Durchsuche

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn