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:402425Durchsuche

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 Typen

ease=>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>

x gibt den Gradwert an, positive Zahl ist Drehung im Uhrzeigersinn, negative Zahl ist Drehung gegen den Uhrzeigersinn.

Rotation kann transform-origin

verwenden, um den Rotationsmittelpunkt anzugeben. Transform-origin kann auch bestimmte Pixelwerte für links oben rechts unten angeben.

<!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>

(2) 3D-Verformung

(a) Drehen (RotateX, RotateY, RotateZ)

Die 3D-Rotation ähnelt der 2D-Rotation, mit der Ausnahme, dass die eine auf zweidimensionalen Koordinaten und die andere auf dreidimensionalen Koordinaten basiert. Die drei Werte können gleichzeitig oder einzeln angegeben werden.

<!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

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 自定义动画

格式如下
@keyframes 动画名称 { from{ 开始} 0% to{ 结束 } 100% }
可以用 from...to 来指定动画过程，也可以用0%~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>

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问 CSS视频教程，CSS3视频教程！

相关推荐：

php公益培训视频教程

CSS在线手册

CSS3在线手册

div/css图文教程

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!

php css css3 count 循环 Property function transform transition animation

Stellungnahme：

Dieser Artikel ist reproduziert unter:jb51.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：So verwenden Sie transform skewX in CSS3, um ein Parallelogramm-Navigationsmenü zu implementierenNächster Artikel：So verwenden Sie transform skewX in CSS3, um ein Parallelogramm-Navigationsmenü zu implementieren

In Verbindung stehende Artikel

Mehr sehen