Heim > Artikel > Web-Frontend > 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. Animation1. 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-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); }
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!