Un exemple de création d'une ligne de connexion Lightning à l'aide du langage CSS

Aperçu de l'effet

Appuyez sur le bouton "Cliquez pour prévisualiser" à droite pour prévisualiser sur la page actuelle, ou cliquez sur le lien pour prévisualiser en plein écran.

https://codepen.io/comehope/pen/RBjdzZ

Vidéo interactive

Cette vidéo est interactive, vous pouvez mettre la vidéo en pause à tout moment et la modifier code.

Veuillez utiliser Chrome, Safari, Edge pour ouvrir et regarder.

https://scrimba.com/p/pEgDAM/cgkE6C6

Interprétation du code

Définissez dom, le conteneur contient 2 éléments, représentant des fiches et des câbles :

<p class="cable">
    <span class="head"></span>
    <span class="body"></span>
</p>

Centre :

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

Définir la taille du conteneur :

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

Dessiner le contour du bouchon :

.head {
    width: 8.5em;
    height: 8.5em;
    border-radius: 2em 0 0 2em;
}

Dessiner le contour des broches sur la fiche :

.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;
}

Dessinez le contour de la partie tenue à la main du câble :

.body {
    width: 15.5em;
    height: 11em;
    border-radius: 0.5em;
}

Dessinez le contour de la partie un peu plus épaisse du câble :

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

.body::before {
    content: '';
    position: absolute;
    width: 13.5em;
    height: 6em;
    left: 15.5em;
}

Dessinez la partie d'extension du câble :

.body::after {
    content: '';
    position: absolute;
    width: 100vh;
    height: 3.9em;
    left: calc(15.5em + 13.5em);
}

Masquez la partie à l'extérieur de l'écran :

body {
    overflow: hidden;
}

Dessinez ensuite les détails.
Peignez la couleur dégradée pour la rallonge :

.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
        );
}

Peignez la couleur dégradée pour la partie la plus épaisse du câble :

.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
        );
}

Peignez la couleur dégradée pour la partie portable du câble Couleur :

.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%)
    );
}

Peignez la fiche avec une couleur dégradée :

.head {
    background:
        linear-gradient(
            -45deg, 
            hsl(0, 0%, 75%),
            hsl(0, 0%, 79%),
            hsl(0, 0%, 78%),
            hsl(0, 0%, 87%) 80%
        );
}

Dessinez les broches sur la fiche :

.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;
}

Ajoutez ensuite un ombrage pour réaliser les lignes Le câble est plus tridimensionnel.
Dessinez l'ombre sur la prise :

.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%
        );
}

Dessinez l'ombre sur la partie portable du câble :

.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
        );
}

Dessinez l'ombre sur la partie la plus épaisse du câble :

.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
        );
}

Enfin, ajoutez l'animation d'entrée à l'écran

.cable {
    animation: show 5s linear infinite;
}

@keyframes show {
    0% {
        transform: translateX(100vw);
    }

    20%, 100% {
        transform: translateX(0);
    }
}

Vous avez terminé !

Articles connexes :

Créer un séparateur de fuseau en utilisant du CSS3 pur

Comment créer un simple graphique en étoile à cinq branches en utilisant du CSS3 pur

Vidéos associées :

Tutoriel vidéo sur les compétences pratiques en animation CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!