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. 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
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
Postman-Datenverschlüsselung und -entschlüsselung zur Implementierung der Simulationsanforderung der APP-Anmeldeschnittstelle
Inhaltsverzeichnis Hauptsächlich verwendete Postm...
Online-Webtools und -anwendungen, auf die Webentwickler und -designer nicht verzichten können
Sie erinnern sich vielleicht, dass wir in den ver...
So fügen Sie einen Link in HTML ein
Jede Webseite hat eine Adresse, die durch eine UR...
Zwei Lösungen für das 404-Problem beim Aktualisieren des Vue-Paket-Upload-Servers
1: Nginx-Serverlösung, ändern Sie die .conf-Konfi...
Über Front-End JavaScript ES6 Details
Inhaltsverzeichnis 1. Einleitung 1.1 Babel-Transc...
Detaillierte Erklärung des Vue2 Cube-UI-Zeitwählers
Inhaltsverzeichnis Vorwort 1. Anspruch und Wirkun...
Detailliertes Tutorial zur Installation des Tomcat-Servers und zur Konfiguration von Umgebungsvariablen unter Win10 (Bild und Text)
Inhaltsverzeichnis Herunterladen und Installieren...
MySQL-Reihe: Grundlegende Konzepte der relationalen MySQL-Datenbank
Inhaltsverzeichnis 1. Grundlegende Konzepte 2. En...
Lösung für das Problem, dass die Div-Breite auf width:100% eingestellt ist und dann die Polsterung oder der Rand das übergeordnete Element überschreitet
Vorwort In diesem Artikel wird erläutert, wie Sie...
Die Magie des tr-Befehls beim Zählen der Häufigkeit englischer Wörter
Wir alle kennen den Befehl tr, mit dem Ersetzunge...
So binden Sie einen Docker-Container an eine externe IP und einen externen Port
Docker ermöglicht die Bereitstellung von Netzwerk...
Lösung für das Problem der zu hohen Durchdringung von Eingabe- und Textbereichsebenen im WeChat-Applet
Die nativen Komponenten des WeChat-Miniprogramms ...
Der Grund, warum MySQL den B+-Baum als zugrunde liegende Datenstruktur verwendet
Wir alle wissen, dass die zugrunde liegende Daten...
Detaillierte Erläuterung der Verwendung von Docker Commit
Manchmal müssen Sie bestimmte Abhängigkeiten im B...
Nginx-Proxy-Axios-Anforderung und Vorsichtsmaßnahmen
Vorwort Ich habe vor kurzem eine kleine Demo gesc...