Inhaltsverzeichnis
Effektvorschau
Interaktives Video
Code-Interpretation
Heim Web-Frontend CSS-Tutorial Ein Beispiel für die Erstellung einer Lightning-Verbindungslinie mithilfe der CSS-Sprache

Ein Beispiel für die Erstellung einer Lightning-Verbindungslinie mithilfe der CSS-Sprache

Jul 30, 2018 pm 02:37 PM
css css3 html5 前端 苹果

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>
Nach dem Login kopieren

Mitte:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
}
Nach dem Login kopieren

Containerabmessungen definieren:

.cable {
    display: flex;
    align-items: center;
    font-size: 10px;
    margin-left: 5em;
}
Nach dem Login kopieren

Umriss des Steckers zeichnen:

.head {
    width: 8.5em;
    height: 8.5em;
    border-radius: 2em 0 0 2em;
}
Nach dem Login kopieren

Umriss der Pins am Stecker zeichnen:

.head {
    position: relative;
}

.head::before {
    content: &#39;&#39;;
    position: absolute;
    width: 3em;
    height: 7.3em;
    top: calc((8.5em - 7.3em) / 2);
    left: 0.7em;
    border-radius: 1em;
    box-sizing: border-box;
}
Nach dem Login kopieren

Zeichnen Sie den Umriss des handgehaltenen Teils des Kabels:

.body {
    width: 15.5em;
    height: 11em;
    border-radius: 0.5em;
}
Nach dem Login kopieren

Zeichnen Sie den Umriss des etwas dickeren Teils des Kabels:

.body {
    position: relative;
    display: flex;
    align-items: center;
}

.body::before {
    content: &#39;&#39;;
    position: absolute;
    width: 13.5em;
    height: 6em;
    left: 15.5em;
}
Nach dem Login kopieren

Zeichnen Sie den Verlängerungsteil des Kabels:

.body::after {
    content: &#39;&#39;;
    position: absolute;
    width: 100vh;
    height: 3.9em;
    left: calc(15.5em + 13.5em);
}
Nach dem Login kopieren

Verstecke die Teile außerhalb des Rahmens:

body {
    overflow: hidden;
}
Nach dem Login kopieren

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
        );
}
Nach dem Login kopieren

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
        );
}
Nach dem Login kopieren

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%)
    );
}
Nach dem Login kopieren

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%
        );
}
Nach dem Login kopieren

Zeichnen Sie die Stifte auf den Stecker:

.head::before {
    background-color: white;
}

.head::after {
    content: &#39;&#39;;
    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;
}
Nach dem Login kopieren

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%
        );
}
Nach dem Login kopieren

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
        );
}
Nach dem Login kopieren

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
        );
}
Nach dem Login kopieren

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);
    }
}
Nach dem Login kopieren

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!

Erklärung dieser Website
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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Deepseek iOS -Version Download- und Installations -Tutorial Deepseek iOS -Version Download- und Installations -Tutorial Feb 19, 2025 pm 04:00 PM

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,

Sesame Open Door Trading Platform Download Mobile Version Gateio Trading Platform Download -Adresse Sesame Open Door Trading Platform Download Mobile Version Gateio Trading Platform Download -Adresse Feb 28, 2025 am 10:51 AM

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? Warum kann der Bybit -Exchange -Link nicht direkt heruntergeladen und installiert werden? Feb 21, 2025 pm 10:57 PM

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

Gate.io Sesam -Tür herunterladen Chinesisches Tutorial Gate.io Sesam -Tür herunterladen Chinesisches Tutorial Feb 28, 2025 am 10:54 AM

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.

So finden Sie den Download -Link von Ouyi OKX Android und Apple So finden Sie den Download -Link von Ouyi OKX Android und Apple Feb 21, 2025 pm 05:39 PM

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.

Wie installiere und registriere ich eine App zum Kauf virtueller Münzen? Wie installiere und registriere ich eine App zum Kauf virtueller Münzen? Feb 21, 2025 pm 06:00 PM

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.

Sesame Open Door Exchange App offizieller Download Sesam Open Door Exchange Offizielle Download Sesame Open Door Exchange App offizieller Download Sesam Open Door Exchange Offizielle Download Mar 04, 2025 pm 11:54 PM

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.

See all articles