Heim > Artikel > Web-Frontend > CSS-Zusammenfassungshinweise: Beispiele für Transformationen, Übergänge und Animationen
CSS-Zusammenfassungshinweise: Beispiele für Transformationen, Übergänge und Animationen
- 青灯夜游nach vorne
- 2018-10-09 17:00:402486Durchsuche
In diesem Artikel werden hauptsächlich relevante Informationen zu CSS-Zusammenfassungen und Beispielen für Verformung, Übergang und Animation vorgestellt. Ich hoffe, dass er für Sie hilfreich ist.
1. Übergangs-Timing-Funktion Übergangsverzögerung
kann zusammen oder separat angegeben werden transition-property: Die zu übertragenden Eigenschaften (wie Breite, Höhe) werden alle geändert. Übergangsdauer: die aufgewendete Zeit, in s oder ms
Übergangs-Timing-Funktion: Gibt den Animationstyp (Bewegungsbereichskurve) an. Die Bewegungskurven haben die folgenden Typenease=>Allmähliche Verlangsamung (Standardwert) linear=>Konstante Geschwindigkeit, leichtes Einfahren=>Beschleunigen, leichtes Ausfahren=>Verzögern, leichtes Ein- und Ausfahren=>Erst beschleunigen und dann abbremsen
Übergangsverzögerungszeit, Einheit ist s oder ms
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p {
width: 100px;
height: 200px;
background-color: aqua;
transition: width 2s ease-in-out 0.5s;
}
p:hover {
width: 500px;
}
</style>
</head>
<body>
<p></p>
</body>
</html>Die Ergebnisse sind wie folgt: Wenn die Maus nach oben bewegt wird, wird die Änderung nicht mehr sofort abgeschlossen, aber der Übergang ist abgeschlossen.
2. Transformieren
transformieren
(1), 2D-Transformation (a) Move translator(x,y)
Bewegung kann den Pixelwert oder den Prozentsatz angeben. Hinweis: Der angegebene Prozentsatz ist der Prozentsatz seiner eigenen Größe. Daher kann beim Festlegen der Box-Positionierung die zentrierte Ausrichtung verwendet werden (nach links einstellen: 50 % und dann um -50 % verschieben).<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p {
width: 100px;
height: 100px;
background-color: aqua;
transition: all 2s;
}
p:active {
transform: translate(200px, 200px);
}
</style>
</head>
<body>
<p></p>
</body>
</html>
Das Feld wurde nach dem Klicken verschoben. Der zum Zentrieren des positionierten Felds verwendete Code wird unter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fa {
width: 300px;
height: 300px;
background-color: aqua;
transition: all 0.5s;
position: relative;
}
.son {
background-color: red;
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<p class="fa">
<p class="son"></p>
</p>
</body>
</html>eingegeben und das Ergebnis ist
(b) Scale Scale (x, y)
x und y werden zum Vergrößern auf größer als 1 eingestellt, und kleiner als 1 werden verkleinert.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p {
width: 100px;
height: 100px;
background-color: aqua;
margin: 200px auto;
transition: all 2s;
}
p:hover {
transform: scale(0.5, 2);
}
</style>
</head>
<body>
<p>
</p>
</body>
</html>
(c) Drehung rotieren(x Grad)
x gibt den Gradwert an, positive Zahl ist Drehung im Uhrzeigersinn, negative Zahl ist Drehung gegen den Uhrzeigersinn.
Rotation kann 
transform-origin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p {
width: 200px;
height: 100px;
background-color: aqua;
margin: 200px auto;
transition: all 2s;
transform-origin: bottom left;
}
p:hover {
transform: rotate(120deg);
}
</style>
</head>
<body>
<p></p>
</body>
</html>
(d) Neigungsschräge (x Grad, y Grad) x, y geben den Neigungswinkel in x- bzw. y-Richtung an, you can ist eine negative Zahl. Der y-Wert ist standardmäßig 0, wenn er nicht geschrieben wird.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p {
width: 100px;
height: 100px;
background-color: aqua;
border: 1px solid red;
transition: all 1s;
margin: 200px auto;
}
p:hover {
transform: skew(30deg, 20deg);
}
</style>
</head>
<body>
<p></p>
</body>
</html>
(a) Drehen (RotateX, RotateY, RotateZ) 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p {
width: 200px;
height: 100px;
background-color: aqua;
margin: 200px auto;
transition: all 2s;
transform-origin: bottom left;
}
p:hover {
transform: rotateX(120deg);
/* transform: rotateY(120deg); */
/* transform: rotateZ(120deg); */
}
</style>
</head>
<body>
<p></p>
</body>
</html>
(b) Bewegen (translateX, translatorY, translatorZ)
3D-Bewegung stimmt mit 2D-Bewegung für Bewegung in xy-Richtung überein. Lediglich die Bewegung in z-Richtung ist unterschiedlich. Eine Bewegung in Z-Richtung bedeutet, dass der Abstand im wirklichen Leben weiter und näher wird. Daher werden die auf der Webseite angezeigten Ergebnisse größer, wenn das Objekt näher ist, und kleiner, wenn das Objekt weiter entfernt ist.
Damit die Z-Linearbewegung wirksam wird, müssen Sie zunächst die Perspektive (den Abstand zwischen den Augen und dem Bildschirm) festlegen >
3. Animation
(1),
Animation:
Animation-
Name ||. Animation-
Dauer|| Animation- Timing-Funktion || animation- iteration-count|| |. >animation- fill-mode animation-name: Animationsname (von Ihnen mithilfe von @keyframes definiert) Animationsdauer: Dauer Animations-Timing-Funktion: Bewegungskurve, ähnlich der Bewegungskurve des Übergangs. animation-delay: Verzögerungszeit animation-iteration-count: Anzahl der Schleifen (unendlich ist eine Endlosschleife) animation-direction: ob umgekehrt werden soll (ob die Animation ist von Das Ende wird verkehrt herum abgespielt) animation-fill-mode：设置在动画播放之外的状态（结束时的状态）none | forwards（设为结束时的状态）| backwards(设为开始时的状态)|both（设为开始或结束时的状态） animation-play-state：设置动画状态 running 开始|paused 暂停 （2）、@keyframes 自定义动画 格式如下 可以用 from...to 来指定动画过程，也可以用0%~100%指定动画过程。 总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问 CSS视频教程，CSS3视频教程！ 相关推荐：@keyframes 动画名称 {
from{ 开始} 0%
to{ 结束 } 100%
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p {
width: 100px;
height: 100px;
background-color: aqua;
/* animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向 */
animation: move 5s linear 3;
}
@keyframes move {
0% {
transform: translate3d(0, 0, 0);
}
25% {
transform: translate3d(400px, 0, 0);
}
50% {
transform: translate3d(400px, 300px, 0);
}
75% {
transform: translate3d(0, 300px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
</style>
</head>
<body>
<p></p>
</body>
</html>
Das obige ist der detaillierte Inhalt vonCSS-Zusammenfassungshinweise: Beispiele für Transformationen, Übergänge und Animationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!