So verwenden Sie Übersetzung und Übergang in CSS3

So verwenden Sie Übersetzung und Übergang in CSS3

Ich habe immer das Gefühl, dass Übersetzen und Übergehen sehr mächtig sind und ich sie nie lernen kann. Tatsächlich zögere ich, sie zu verstehen. Ich habe weniger als eine halbe Stunde damit verbracht, die Dokumentation der Schnittstelle zu lesen und habe ein allgemeines Verständnis davon bekommen. Das Folgende ist ein Beispiel. Sie können es herunterladen und selbst ausführen.

<!DOCTYPE html>
<html>
<Kopf>
  <title>Übersetzen und Übergang</title>
</Kopf>
<Text>
<style type="text/css">
  div {
    Breite: 100px;
    Höhe: 75px;
    Hintergrundfarbe: rot;
    Rand: 1px tief schwarz;
  }

  div#übersetzen {
    Übergang: alles 2er;
    -ms-Übergang: alle 2 s;
    -webkit-transition: alle 2en;
  }

  div#translate:hover{
    transformieren: übersetzen(50px, 100px);
    -ms-transform: übersetzen(50px, 100px);
    -webkit-transform: übersetzen(50px, 100px);
  }
</Stil>
<div>Hallo, dies ist ein Div-Element</div>
<div id='translate'>Hallo, dies ist ein weiteres Div-Element</div>
</body>
</html>

Für eine Demo klicken Sie bitte hier[/css3/translate.html]

übersetzen (a, b): Offiziell wird es als 2D-Transfer bezeichnet, was eigentlich die Bewegung der x- und y-Achse auf der Ebene ist. Der Grund, warum wir so viele Begriffe verwenden, ist, dass wir nicht gut ausgebildet sind und es nicht leicht verstehen wollen.
a – Bewegen Sie sich horizontal (links und rechts) um eine Einheitsdistanz, also auf der x-Achse. Wenn es beispielsweise 10px sind, bewegen Sie sich um 10px. Positive Werte bewegen sich nach rechts und negative Werte nach links. b – Bewegen Sie sich vertikal (nach oben und unten) um eine Einheitsdistanz, also auf der y-Achse. Wenn es beispielsweise 50px sind, bewegen Sie sich um 10px. Positive Werte bewegen sich nach unten und negative Werte nach oben.

Der Startpunkt befindet sich in der oberen linken Ecke. Wenn die Elementposition jedoch am Anfang auf einen anderen Punkt als den Ursprung festgelegt ist, sieht die Sache anders aus. Die Berechnung erfolgt dann auf Elementbasis.

Herkunft (0,0) ----------
|
|
|

Übergang Animation Übergang

Übergang: Eigenschaftsdauer, Zeitfunktion, Verzögerung

Eigenschaft - CSS-Eigenschaft

Dauer – Dauer der Animationsausführung. Wenn der Wert 0 ist, wird die Animation nicht ausgeführt.

Der Standard-Ausführungsmodus für die Timing-Funktionsanimation ist einfach

Verzögerung – Ausführungszeit der Animationsverzögerung ist standardmäßig 0

Diese vier sind Attribute. Ich glaube nicht, dass ich noch weitere Attribute geschrieben habe. Weitere Einzelheiten finden Sie im Dokument [https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition].

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von Übersetzung und Übergang in CSS3. Weitere Informationen zur Verwendung von CSS3-Übersetzungsübergängen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Wir hoffen, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<:  Beheben des Problems, dass Notizendetails auf Webseiten grau werden

>>:  Attribute im Vue V-For-Loop-Objekt

Artikel empfehlen

Beispielcode für Nginx zur Erreichung dynamischer und statischer Trennung

1. Einfache Konfiguration der dynamischen und sta...

Zusammenfassung der Unterschiede zwischen MySQL und Oracle (Vergleich der Funktionsleistung, Auswahl, SQL bei der Verwendung usw.)

1. Parallelität Die wichtigste Funktion einer OLT...

Beispielcode zur Implementierung transparenter Verlaufseffekte mit CSS

Die Titelbilder in den Spalten von Zhihu Discover...

Das WeChat-Applet implementiert einen Countdown zum Senden des SMS-Bestätigungscodes

In diesem Artikel finden Sie den spezifischen Cod...

IE8 bietet eine gute Erfahrung: Aktivitäten

Heute habe ich einen kleinen Vorgeschmack auf IE8...

Tiefgreifendes Verständnis der dynamischen und asynchronen Komponenten von Vue

1. Dynamische Komponenten <!DOCTYPE html> &...

Benutzerdefinierte Docker-Netzwerkcontainer-Verbindung

Inhaltsverzeichnis Vorwort -Link Benutzerdefinier...

Linux Dateisystemtyp anzeigen Beispielmethode

So überprüfen Sie den Dateisystemtyp einer Partit...

So reparieren Sie beschädigte MySQL-Datenbankdateien schnell mit den Tools myisamchk und mysqlcheck

Da der Festplattenspeicher der Server-Datenbank v...

11 Möglichkeiten, Duplikate aus JS-Arrays zu entfernen

Bei der tatsächlichen Arbeit oder bei Interviews ...

vue+echarts realisiert den Flusseffekt der China-Karte (detaillierte Schritte)

@vue+echarts realisiert den Flusseffekt der China...

Eine kurze Erläuterung der Rolle und Funktionsweise von Schlüsseln in Vue3

Welche Funktion hat dieses Schlüsselattribut? Sch...

MySQL verwendet den Befehl truncate, um alle Tabellen in einer Datenbank schnell zu löschen

1. Führen Sie zuerst die Select-Anweisung aus, um...

So konfigurieren Sie den Tomcat-Server für Eclipse und IDEA

Tomcat-Serverkonfiguration Jeder, der das Web ken...

Vorteile von INSERT INTO SET in MySQL

Daten in MySQL-Datenbank einfügen. Bisher häufig ...