Heim > Artikel > Web-Frontend > Verwenden Sie CSS, um Bezier-Kurven zu erstellen

Verwenden Sie CSS, um Bezier-Kurven zu erstellen

一个新手Original: 2017-10-08 09:32:183038Durchsuche

Vorwort

Bevor Sie cubic-bezier verstehen, müssen Sie den Animationseffekt in CSS3 verstehen, der ein wichtiger Inhalt in animation-timing-function und transition-timing-function ist.

Ontologie

Einführung

cubic-bezier Auch als kubischer Bezier bekannt, handelt es sich hauptsächlich um eine Funktion, die Geschwindigkeitskurven für animation generiert Bedingung ist cubic-bezier(bc6fe54a88198feaad90e17e912675f1, 22e181b6d31cf86e9ad22800df920dd0, be787f7ac9828fa514a83e4c791ae092, f4bf86c47d72eed593f57bb329a5f9f8).

Wir können cubic-bezier aus dem Bild unten kurz verstehen:

Was wir aus dem Bild oben wissen müssen, ist der Wertebereich von cubic-bezier:

P0: Standardwert (0, 0)
P1: Dynamischer Wert (x1, y1)
P2: Dynamischer Wert (x2, y2)
P3: Standardwert (1, 1)

Worauf wir achten müssen, sind die Werte von P1 und P2, und der Wertebereich von X 轴 reicht von 0 bis 1 Der Wert cubic-bezier ist ungültig, wenn er den Bereich überschreitet. Der Wert von Y 轴 ist nicht angegeben und muss natürlich nicht zu groß sein. Das direkteste Verständnis von

besteht darin, als gerade Linie mit einem Bereich von nur 1 auf der Koordinatenachse zu platzieren und zwei Punkte aus der Mitte herauszuziehen (der Wertebereich der X-Achse beträgt [0, 1], die Y-Achse ist beliebig), und die endgültige Kurve ist die Geschwindigkeitskurve der Animation .

Verwendung von

Im Testbeispiel:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style>
    .animation {
      width: 50px;
      height: 50px;
      background-color: #ed3;
      -webkit-transition:  all 2s;
           -o-transition:  all 2s;
              transition:  all 2s;
    }
    .animation:hover {
      -webkit-transform:  translateX(100px);
          -ms-transform:  translateX(100px);
           -o-transform:  translateX(100px);
              transform:  translateX(100px);
    }
  </style>
</head>
<body>
  <p class="animation"></p>
</body>
</html>

Wir können im Browser sehen, dass, wenn die Maus über das Element bewegt wird, das Element beginnt, sich zum zu bewegen rechts, es beginnt langsam und wird dann schneller, wenn es sich wegbewegt, kehrt es entsprechend der ursprünglichen Kurve zum Ursprung zurück.

Wenn wir im Beispiel kein transition oder ein anderes cubic-bezier zu timing-function hinzufügen, lautet die Standardgeschwindigkeitskurve ease und die Geschwindigkeitskurve zu diesem Zeitpunkt lautet:

Dann fügen wir cubic-bezier(.17, .86, .73, .14) zum Code hinzu:

....animation {
  ...  -webkit-transition:  
  all 2s cubic-bezier(.17, .86, .73, .14);       
  -o-transition:  all 2s cubic-bezier(.17, .86, .73, .14);          
  transition:  all 2s cubic-bezier(.17, .86, .73, .14);
}
...

Aktualisieren Sie dann die Seite, um den Effekt zu beobachten. Sie werden sehen, dass sich die Animation während des Ausführungsprozesses sehr langsam bewegt. Die Geschwindigkeit ist zu diesem Zeitpunkt ähnlich:

Mehrere häufig verwendete feste Werte entsprechen dem `cubic-bezier`-Wert und der Geschwindigkeitskurve

ease：cubic-bezier(.25, .1, .25, 1)
liner：cubic-bezier(0, 0, 1, 1) / cubic-bezier(1, 1, 0, 0)
ease-in：cubic-bezier(.42, 0, 1, 1)
ease-out：cubic-bezier(0, 0, .58, 1)
ease-in-out：cubic-bezier(.42, 0, .58, 1)
In Out . Back（来回的缓冲效果）：cubic-bezier(0.68, -0.55, 0.27, 1.55)

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um Bezier-Kurven zu erstellen. 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

Vorheriger Artikel：Lösung für Punkt (.) im CSS-SelektorNächster Artikel：Lösung für Punkt (.) im CSS-Selektor

In Verbindung stehende Artikel

Mehr sehen