


Ein Beispiel für die Erstellung einer Lightning-Verbindungslinie mithilfe der CSS-Sprache
Effektvorschau
Klicken Sie rechts auf die Schaltfläche „Zur Vorschau klicken“, um eine Vorschau auf der aktuellen Seite anzuzeigen, oder klicken Sie auf den Link, um eine Vorschau im Vollbildmodus anzuzeigen.
https://codepen.io/comehope/pen/RBjdzZ
Interaktives Video
Dieses Video ist interaktiv, Sie können das Video jederzeit anhalten und bearbeiten Code.
Bitte verwenden Sie Chrome, Safari, Edge zum Öffnen und Ansehen.
https://scrimba.com/p/pEgDAM/cgkE6C6
Code-Interpretation
Dom definieren, der Container enthält 2 Elemente, die Stecker und Kabel darstellen:
<p class="cable"> <span class="head"></span> <span class="body"></span> </p>
Mitte:
body { margin: 0; height: 100vh; display: flex; align-items: center; }
Containerabmessungen definieren:
.cable { display: flex; align-items: center; font-size: 10px; margin-left: 5em; }
Umriss des Steckers zeichnen:
.head { width: 8.5em; height: 8.5em; border-radius: 2em 0 0 2em; }
Umriss der Pins am Stecker zeichnen:
.head { position: relative; } .head::before { content: ''; position: absolute; width: 3em; height: 7.3em; top: calc((8.5em - 7.3em) / 2); left: 0.7em; border-radius: 1em; box-sizing: border-box; }
Zeichnen Sie den Umriss des handgehaltenen Teils des Kabels:
.body { width: 15.5em; height: 11em; border-radius: 0.5em; }
Zeichnen Sie den Umriss des etwas dickeren Teils des Kabels:
.body { position: relative; display: flex; align-items: center; } .body::before { content: ''; position: absolute; width: 13.5em; height: 6em; left: 15.5em; }
Zeichnen Sie den Verlängerungsteil des Kabels:
.body::after { content: ''; position: absolute; width: 100vh; height: 3.9em; left: calc(15.5em + 13.5em); }
Verstecke die Teile außerhalb des Rahmens:
body { overflow: hidden; }
Zeichne als nächstes die Details.
Malen Sie einen Farbverlauf für das Verlängerungskabel:
.body::after { background: linear-gradient( white, hsl(0, 0%, 96%) 5%, hsl(0, 0%, 97%) 25%, hsl(0, 0%, 95%) 40%, hsl(0, 0%, 81%) 95%, white ); }
Malen Sie einen Farbverlauf für den dickeren Teil des Kabels:
.body::before { background: linear-gradient( white, hsl(0, 0%, 96%) 5%, hsl(0, 0%, 98%) 20%, hsl(0, 0%, 95%) 50%, hsl(0, 0%, 81%) 95%, white ); }
Malen Sie einen Farbverlauf für den handgehaltenen Teil des Kabels:
.body { background:linear-gradient( hsl(0, 0%, 91%), white 15%, hsl(0, 0%, 93%) 50%, hsl(0, 0%, 87%) 70%, hsl(0, 0%, 79%) 90%, hsl(0, 0%, 84%), hsl(0, 0%, 86%) ); }
Malen Sie den Stecker mit einer Verlaufsfarbe:
.head { background: linear-gradient( -45deg, hsl(0, 0%, 75%), hsl(0, 0%, 79%), hsl(0, 0%, 78%), hsl(0, 0%, 87%) 80% ); }
Zeichnen Sie die Stifte auf den Stecker:
.head::before { background-color: white; } .head::after { content: ''; position: absolute; box-sizing: border-box; width: 2.2em; height: 0.4em; color: goldenrod; background-color: currentColor; border-radius: 0.5em; left: 1.1em; top: 1.2em; box-shadow: 0 0.8em 0, 0 1.6em 0, 0 2.4em 0, 0 3.2em 0, 0 4em 0, 0 4.8em 0, 0 5.6em 0; }
Fügen Sie als Nächstes einen Schatten hinzu, um das Kabel dreidimensionaler zu machen.
Schattieren Sie den Stecker:
.head { background: linear-gradient( 90deg, transparent 80%, rgba(0,0,0,12%) ), linear-gradient( -45deg, hsl(0, 0%, 75%), hsl(0, 0%, 79%), hsl(0, 0%, 78%), hsl(0, 0%, 87%) 80% ); }
Schattieren Sie den handgehaltenen Teil des Kabels:
.body::before { background: linear-gradient( 45deg, rgba(0,0,0,4%) 10%, transparent 20% ), linear-gradient( 90deg, rgba(0,0,0,4%), transparent 10% ), linear-gradient( white, hsl(0, 0%, 96%) 5%, hsl(0, 0%, 98%) 20%, hsl(0, 0%, 95%) 50%, hsl(0, 0%, 81%) 95%, white ); }
Schattieren Sie den dickeren Teil des Kabels:
.body::after { background: linear-gradient( 45deg, rgba(0,0,0,4%), transparent 4% ), linear-gradient( 90deg, rgba(0,0,0,4%), transparent 2% ), linear-gradient( white, hsl(0, 0%, 96%) 5%, hsl(0, 0%, 97%) 25%, hsl(0, 0%, 95%) 40%, hsl(0, 0%, 81%) 95%, white ); }
Fügen Sie abschließend die Eingangsanimation hinzu zum Bildschirm
.cable { animation: show 5s linear infinite; } @keyframes show { 0% { transform: translateX(100vw); } 20%, 100% { transform: translateX(0); } }
Du bist fertig!
Verwandte Artikel:
Erstellen Sie einen Spindelteiler mit reinem CSS3
So erstellen Sie eine einfache fünfzackige Sterngrafik mit reinem CSS3
Ähnliche Videos:
Video-Tutorial zu praktischen Fähigkeiten der CSS-Animation
Das obige ist der detaillierte Inhalt vonEin Beispiel für die Erstellung einer Lightning-Verbindungslinie mithilfe der CSS-Sprache. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Deepseek Smart KI -Tool -Download- und Installationshandbuch (Apple Users) Deepseek ist ein leistungsstarkes KI -Tool. 1. Schritte herunterladen und installieren: Öffnen Sie den AppStore App Store und geben Sie "Deepseek" in die Suchleiste ein. Überprüfen Sie den Anwendungsnamen und Entwicklerinformationen sorgfältig, um sicherzustellen, dass die richtige Version heruntergeladen wird. Klicken Sie auf der Seite "Anwendungsdetails" auf die Schaltfläche "Gehen". Der erste Download erfordert möglicherweise eine AppleId -Passwortüberprüfung. Nachdem der Download abgeschlossen ist, können Sie es direkt öffnen. 2. Registrierungsprozess: Finden Sie das Anmelde-/Registrierungsportal in der Deepseek -Anwendung. Es wird empfohlen, sich bei einer Mobiltelefonnummer zu registrieren. Geben Sie Ihre Handynummer ein und erhalten Sie den Bestätigungscode. Überprüfen Sie die Benutzervereinbarung,

Es ist wichtig, einen formalen Kanal auszuwählen, um die App herunterzuladen und die Sicherheit Ihres Kontos zu gewährleisten.

Warum kann der Bybit -Exchange -Link nicht direkt heruntergeladen und installiert werden? Bitbit ist eine Kryptowährungsbörse, die den Benutzern Handelsdienste anbietet. Die mobilen Apps der Exchange können aus den folgenden Gründen nicht direkt über AppStore oder Googleplay heruntergeladen werden: 1. App Store -Richtlinie beschränkt Apple und Google daran, strenge Anforderungen an die im App Store zulässigen Anwendungsarten zu haben. Kryptowährungsanträge erfüllen diese Anforderungen häufig nicht, da sie Finanzdienstleistungen einbeziehen und spezifische Vorschriften und Sicherheitsstandards erfordern. 2. Die Einhaltung von Gesetzen und Vorschriften In vielen Ländern werden Aktivitäten im Zusammenhang mit Kryptowährungstransaktionen reguliert oder eingeschränkt. Um diese Vorschriften einzuhalten, kann die Bitbit -Anwendung nur über offizielle Websites oder andere autorisierte Kanäle verwendet werden

In diesem Artikel werden Sie ausführlich angeleitet, wie Sie auf die offizielle Website von Gate.io zugreifen, die chinesische Sprache wechseln, sich in Ihrem Konto anmelden oder sich an Ihrem Konto anmelden sowie die optionalen Download- und Nutzungsprozeduren anmelden und Ihnen dabei helfen, mit dem Gate.io -Austausch einfach zu beginnen. Weitere Tutorials zur Verwendung von Gate.io auf Chinesisch finden Sie weiter.

Ouyi OKX ist eine weltweit führende Kryptowährung, die den Benutzern ein sicheres und bequemes Handelserlebnis bietet. Benutzer können die mobilen Apps von Ouyi OKX herunterladen, einschließlich Android- und Apple -Versionen über offizielle Kanäle.

Zusammenfassung: Dieser Artikel soll Benutzer zur Installation und Registrierung einer virtuellen Währungshandelsanwendung auf Apple -Geräten leiten. Apple verfügt über strenge Vorschriften für Anwendungen mit virtuellen Währungen, sodass Benutzer spezielle Schritte ausführen müssen, um den Installationsprozess abzuschließen. Dieser Artikel wird auf die erforderlichen Schritte ausgelöst, einschließlich des Herunterladens der Anwendung, des Erstellens eines Kontos und der Überprüfung Ihrer Identität. Im Anschluss an den Handbuch dieses Artikels können Benutzer problemlos eine virtuelle Währungs -Handels -App für ihre Apple -Geräte einrichten und mit dem Handel beginnen.

Die offiziellen Download -Schritte des Sesam Open Exchange -App -App -App -Prozesss decken den Download -Prozess des Android- und iOS -Systems sowie allgemeine Probleme mit Lösungen ab, mit denen Sie sicher und schnell herunterladen und bequeme Transaktionen von Kryptowährungen ermöglichen.

GATE.IS Mobilfunkanleitung: 1.
