Heim >Web-Frontend >CSS-Tutorial >Verwenden Sie CSS3-Transformation, Übergang, Animation und zugehörige Attributanalyse
Transformation: Sie können die Matrix auf Elementobjekten drehen, skalieren, verschieben, neigen und verformen.
Beispiel:
<strong>transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg);<br>/*矩阵变形*/<br>matrix(<number>,<number>,<number>,<number>,<number>,<number>);<br>/*透视*/<br>perspective(length);</strong>
Übergang: Übergangsattribut
Übergang: CSS-Attribut Name des Übergangseffekts Dauer des Übergangsgeschwindigkeitseffekts Geschwindigkeit Startzeit des Kurvenübergangseffekts;
<strong>transition: property duration timing-function delay;<br>/*示例*/<br>transition:1s ease all;<br>-webkit-tansition:1s ease all;<br>-moz-transition:1s ease all;<br>-o-transition:1s ease all;</strong>
rotate(): zweidimensionales Raumrotationselement.
Wenn für das Element ein perspektivischer Wert festgelegt ist, kann rotation3d() verwendet werden, um eine Drehung im dreidimensionalen Raum zu erreichen.
<strong>rotateX(angele)/*相当于rotate3d(1,0,0,angle)指定在三维空间内的X轴旋转*/<br>rotateY(angele)/*相当于rotate3d(0,1,0,angle)指定在三维空间内的Y轴旋转*/<br>rotateZ(angele)/*相当于rotate3d(0,0,1,angle)指定在三维空间内的Z轴旋转*/</strong>
scale()
<strong>scaleX(<number>)/*只在X轴(水平方向)缩放元素*/<br>scaleY(<number>)/*只在Y轴(垂直方向)缩放*/<br>scaleZ(<number>)/*只在Z轴缩放,前提:元素设定透视值*/</strong>
translate([,]): Bewegung, also das Ausmaß der Verschiebung.
<strong>translateX(<translation-value>);/*只在X轴(水平方向)移动*/<br>translateY(<translation-value>);/*只在Y轴(垂直方向)移动*/<br>translateZ(<translation-value>);/*只在Z轴移动,前提:元素设置透视值*/</strong>
skew(): skew
<strong>skewX(<angle>);/*只在X轴(水平)倾斜*/<br>skewY(<angle>);/*只在Y轴(垂直)倾斜*/</strong>
matrix(a,c,e,b,d,f): Bei der Matrixverformung werden die Werte von c und e durch Sinus- oder Kosinuswerte dargestellt.
a: stellt die Skalierung der X-Achse dar
c: skewY(); 🎜>b: scaleY(); Y-Achsen-Skalierung
d: TranslateX() X-Achsen-Bewegung
f: TranslateY() Y-Achsen-Bewegung
transform:matrix(<number>,<number>,<number>,<number>,<number>,<number>);perspective(): Perspektive
<strong>.wrap{<br> perspective:1000px; <br>}<br>.wrap .child{<br> transform:perspective(1000px);<br>}</strong>2. Transition
<strong>transition-property:all;/*针对所有元素都有过度效果*/<br>transition-property:none;/*没有元素有过度效果*/<br>transition-property:ident;/*指定css属性有过度效果,例如width*/</strong>Übergangsdauer: Übergangszeit
Übergangsverzögerung: Verzögerungszeit. Wenn es sich um eine negative Zahl handelt, wird die Übergangsaktion ab diesem Zeitpunkt angezeigt und die vorherige Aktion wird abgeschnitten . Übergangs-Timing-Funktion: Übergangseffekt, standardmäßige Leichtigkeit.
<strong>transition-timing-function:ease;/*缓解效果,等同于cubic-bezier(0.25,0.1,0.25,1.0)函数,既立方贝塞尔*/<br>transition-timing-function:linear;/*线性效果,等同于cubic-bezier(0.0,0.0,1.0,1.0)函数*/<br>transition-timing-function:ease-in;/*渐显效果,等同于cubic-bezier(0.42,0,1.0,1.0)函数*/<br>transition-timing-function:ease-out;/*渐隐效果,等同于cubic-bezier(0,0,0.58,1.0)函数*/<br>transition-timing-function:ease-in-out;/*渐显渐隐效果,等同于cubic-bezier(0.42,0,0.58,1.0)函数*/<br>transition-timing-function:cubic-bezier;/*特殊的立方贝塞尔曲线效果*/</strong>3. Animation
@keyframes entspricht einem Namespace, gefolgt von einem Substantiv. Wenn der Animationsname in der Klasse den entsprechenden Namen definiert, kann die Animation ausgeführt werden. Beim Definieren einer Animation können Sie die Schlüsselwörter from und to direkt verwenden, um von einem Zustand in einen anderen zu wechseln.
<strong>.animation_name{<br> left:0;<br> top:100px;<br> position: absolute;<br> -webkit-animation: 0.5s 0.5s ease infinite alternate;<br> -moz-animation: 0.5s 0.5s ease infinite alternate;<br> -webkit-animation-name:demo;<br> -moz-animation-name:demo;<br>}<br>@-webkit-keyframes demo{<br> from{left:0;}<br> to{left:400px;}<br>}<br>@-webkit-keyframes demo1{<br> 0%{left:0;}<br> 50%{left:200px;}<br> 100%{left:400px;}<br>}</strong>animation-duration: Animationszeit
animation-timing-function: Wiedergabemethode, die Werte sind wie folgt:
ease: Ease-Effekt, äquivalent zur Kubik-Bezier-Funktion (0,25,0,1,0,25,1,0), also kubischer Bezier.
linear: linearer Effektease-in: Fade-out-Effekt
ease-out: fade-out-Effekt
ease-in-out: fade-out-Effekt
Step-Start: Sprung Gehen Sie jetzt zum Endzustand der Animation
step-end: Behalten Sie den Startzustand der Animation bei. Wenn die Animationsausführungszeit abgelaufen ist, springen Sie sofort zum Endzustand der Animation
step([,[start | end]]?): Die erste Parameternummer ist die angegebene Anzahl von Intervallen, d. h. die Animation ist für die phasenweise Anzeige in n Schritte unterteilt. Der zweite Parameter ist standardmäßig auf „Ende“ eingestellt, wodurch der Status „Start“ am Ende und „Ende“ festgelegt wird Zustand am Anfang. Wenn mit Animation festgelegt, ist die Auswirkung von Füllmoduskonflikten und die Einstellung von Animationsfüllmodus der Endzustand der Animation.
Cubic-Bezier(,,,): spezieller kubischer Zebel-Kurveneffekt
Animation- iteration-count: Die Anzahl der Wiedergaben. Wenn der Wert unendlich ist, bedeutet dies eine Endlosschleifenwiedergabe
animation-direction: Der Wert ist:
Normal: Normale Richtung
Umgekehrt: Die Animation läuft rückwärts, die Richtung ist immer ähnlich wie bei NormalAlternativ: Die Animation wechselt abwechselnd vorwärts und rückwärts
none: Standardwert, keine Einstellung Zustand am Anfang
both: Nach dem Ende, zwei Regeln für Vorwärts und Rückwärts können befolgt werden animation-play-state: Status der Objektanimation abrufen oder festlegen, Wert:
running: Standard, Bewegung
paused: Pause
4. Zugehörige Attribute
Prozentsatz: Verwenden Sie den Prozentsatz, um den Koordinatenwert anzugeben, kann negativ seinLänge: Verwenden Sie die Länge, um den Koordinatenwert anzugeben, kann negativ sein
links in der Mitte rechts: horizontaler Richtungswertoben Mitte unten: vertikaler Richtungswert
perspective-prigin: perspektivischer Ursprung, definiert auf der X-Achse und Y-Achse des 3D-Elements, der die untere Position des 3D ermöglicht Bei der Definition dieses Attributs handelt es sich um ein untergeordnetes Element eines Elements, der Perspektive, nicht um das Element selbst. Hinweis: Dieses Attribut muss zusammen mit dem Perspektiveattribut verwendet werden, das nur 3D-transformierte Elemente betrifft.
backface-visibility: Versteckt die Rückseite des Inhalts, die Rückseite ist sichtbar durch Standardmäßig invertiert: Der Inhalt ist nach der Transformation weiterhin sichtbar. Wenn die Sichtbarkeit der Rückseite auf „versteckt“ eingestellt ist, wird der Inhalt nach der Drehung ausgeblendet und die Vorderseite ist nach der Drehung nicht mehr sichtbar. Werte: sichtbar, versteckt
flach: alle untergeordneten Elemente werden in einer 2D-Ebene gerendert Preserve-3d: 3D-Raum bewahren
Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS3-Transformation, Übergang, Animation und zugehörige Attributanalyse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!