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!