CSS -Offset
Beispiel 01: Offset-Outline
Um die Eigenschaft "Umriss-Offset-Eigenschaft" zu verwenden, um transparenten Platz unter dem Element-Rand und seiner Umrisse zu bieten, müssen wir auf der Webseite einen Abschnitt „Div“ erstellen. Wir haben diesen Code mit dem HTML -Tag gestartet und mit dem HTML -Schluss -Tag beendet. Innerhalb des Body -Tags haben wir das Tag „Div“ verwendet, um einen Abschnitt auf der HTML -Webseite zu erstellen. Dieses „Div“ -Tag enthält nur eine einfache Drei-Wörter-Überschrift oder -Schance und wurde mit der Linienbrechung geschlossen, die durch das Break-Line-Tag hinzugefügt wurde “
”.
Innerhalb des "Kopf" -Tages dieses HTML. Wir haben 10 Pixel-Ränder für den Abschnitt „DIV“ zusammen mit einer 5-Pixel-festen Crimson-Grenze hinzugefügt. Die Hintergrundfarbe für diesen Abschnitt „Div“ wäre „Aqua“ und die Umriss würde eine 4-Pixel-gestrichelte violette Farbe haben. Wir haben auch die Eigenschaft „SUCLINE-Offset“ verwendet, um eine 15-Pixel-Lücke zwischen der Grenze des Abschnitts „Div“ und seiner Umrisse zu geben. Sparen wir diesen Code und führen Sie ihn mit dem Menü "Run" des Visual Studio -Code aus.
Nach der erfolgreichen Ausführung dieses Code im Chrome -Browser haben wir die folgende Ausgabe der HTML -Seite. Hier ist eine klare Lücke zwischen dem Crimson 5-Pixel-Rand des Div-Tags und seinem 4-Pixel-gestrichelten violettfarbenen Umriss. Sie können sehen, dass der Raum keine Farbe hat.
Beispiel 02: Offset-Position
Hier finden Sie die Verwendung der Offset -Positionseigenschaft von CSS, um die Startposition eines beliebigen Elements der HTML -Webseite anzugeben. Beginnen wir mit der Verwendung von HTML -Öffnungs- und Schließetiketten. In diesem Tag haben wir Körper- und Kopf -Tags verwendet. Das Body -Tag enthält einfache 2 Überschriften von Größe 2 mit verschiedenen Titeln zuerst. Danach wurden zwei "Div" -Tags verwendet. Das äußere "Div" -Tag wurde mit der ID "A" angegeben, während sein inneres "Div" -Tag mit der ID "B" zur Differenzierung im Styling angegeben wurde.
Die "Div" und Körper Tags sind hier geschlossen. Innerhalb des "Kopf" -Tags haben wir das Title -Tag verwendet, um diese HTML -Webseite und das Style -Tag zu titelten, um dem Körper unserer Webseite etwas Styling zu verleihen. Wir haben das "#A" verwendet, um das äußere "Div" -Tag mit seiner ID "A" zu stylen. Die Offset -Position für diesen Abschnitt „Div“ wurde mit dem Wert „Relativ“ angegeben. Seine Breite und Höhe würden als 200px angegeben, wobei der 5px feste Crimson -Farbgrenze um dieses „Div“ umgeht. Die Position des inneren „DIV“ -Tags wurde auf absolut eingestellt, was sich auf das benachbarte Element bezieht. Die Breite und Höhe für den inneren Abschnitt „Div“ sind auf 75pixel mit der purpurroten Grenze von 5px fest eingestellt.
Der obere und linke Raum oder die linke Polsterung wurde relativ zum äußeren Abschnitt für dieses „DIV“ definiert: oben: 180px und links: 7px. Unser Code ist jetzt bereit, im Browser ausgeführt zu werden.
Die Verwendung des „relativen“ Wertes für die Offset-Position-Eigenschaft platziert den äußeren Abschnitt „Div“ in Bezug auf die anderen Elemente unserer HTML-Seite. Während die Verwendung des „absoluten“ Positionswerts zusammen mit dem Einstellen der oberen und linken Polsterung das innere „Div“ in die Mitte des äußeren „Div“ -Abschnitts platziert hat.
Beispiel 03: Offset-Pfad und Offset-Anchor
Versuchen wir, die Eigenschaft Offset-Anchor und Offset Path zu verwenden, um Animation auf der HTML-Webseite zu erstellen. Der gleiche Titel wurde dieser Webseite gegeben. Innerhalb des Body-Tags haben wir Drei-Abschnitts-Tags verwendet, um verschiedene Abschnitte auf der Webseite zu erstellen, gefolgt von den „Div“ -Tags, um sie zu differenzieren. Alle drei "Div" -Tags enthalten einen einzelnen Text innerhalb und wurden mit drei verschiedenen Klassen angegeben: A, B und C. Der Hauptteil dieses HTML -Code ist sein Style -Tag, das viele CSS -Eigenschaften enthält, um drei Tags zu animieren. Alle drei „Div“ -Tags enthalten die Offset-Pfad-Eigenschaft, um sich entlang des dafür definierten Pfades zu bewegen, sodass sie nicht so eine lineare Bewegung ist. Die Breite und Höhe aller drei Divelelemente wären 100 bzw. 30 Pixel. Die Animation wurde eingestellt, um Divisionselemente zusammen mit der Geschwindigkeit von 3000 Millisekunden zu bewegen, ohne anzuhalten. Somit wird das unendliche Attribut verwendet. Hier kommt das Abschnittselement für das Styling. Sein Hintergrundbild wäre ein linearer Gradient und wäre von oben, 50 Prozent schwarz von links, rechts und mittlerer und 62 Prozent transparent von unten transparent. Außerdem würde jeder Abschnitt 2-Pixel-feste Rand und 10 Pixelränder von unten enthalten.
Die Offset-Anchor-Eigenschaft wurde verwendet, um einen Punkt im „DIV“ -Element zu geben, um über den Pfad zu fahren, der durch die Verwendung der Eigenschaft „Offset-Path“ im Hauptstyling „DIV“ festgelegt wurde. Dies bedeutet, dass sich der Punkt eines „Div“. Die unterschiedlichen Hintergrundfarben für diese „Div“ -Anemente, die Textfarbe und die Textausrichtung für diese Elemente wurden festgelegt. Lassen Sie uns diesen Code speichern und ausführen, um die Änderungen anzuzeigen.
Alle drei DIV-Elemente bewegen sich in drei verschiedenen Abschnitten entlang des nichtlinearen nicht in Folge in Folge, wie unten gezeigt. Diese drei Elemente werden als ein, zwei und drei bezeichnet; Bewegen Sie sich von links nach rechts auf dem Bildschirm.
Wir haben den Code aktualisiert und die verschiedenen Werte für die Offset-Pfad-Eigenschaft im Styling dieses HTML-Codes verwendet. Dieser Weg würde dazu führen, dass sich unsere Divelelemente in einer Zick-Zack-Bewegung bewegen. Außerdem haben wir die Höhe und Breite dieser Div -Abschnitte auf 40 Pixel aktualisiert. Die Bewegungsentfernung wird auch hinzugefügt, während der Rest unverändert bleibt.
Die Ausgabe dieses aktualisierten Codes zeigt uns drei kleine DIV-Elemente mit Zick-Zack-Bewegung entlang jeder ihrer Abschnitte.
Abschluss
In diesem Artikel geht es um die Verwendung verschiedener Offset -Eigenschaften zum Stil und zum Animieren der verschiedenen Elemente einer HTML -Webseite. Wir haben ein Beispiel für die Verwendung der Offset-Outline-Eigenschaft bereitgestellt, um Platz zwischen dem Rand und dem Umriss eines bestimmten Elements hinzuzufügen. Ein weiteres Beispiel wird verwendet, um die Verwendung der Offset-Position-Eigenschaft zu demonstrieren, um das spezifische Element relativ zu anderen Elementen im Körper zu positionieren. Wir haben auch versucht, die HTML-Elemente auf dem Browser-Bildschirm auf einem bestimmten Pfad mit dem Offset-Anchor- und Offset-Path-Eigenschaften auf einem bestimmten Pfad zu verlegen und zu verschieben.