Maison > interface Web > tutoriel CSS > Un exemple de création d'une ligne de connexion Lightning à l'aide du langage CSS

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

php是最好的语言
Libérer: 2018-07-30 14:37:07
original
2326 Les gens l'ont consulté

Un exemple de création dune ligne de connexion Lightning à laide 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>
Copier après la connexion

Centre :

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
}
Copier après la connexion

Définir la taille du conteneur :

.cable {
    display: flex;
    align-items: center;
    font-size: 10px;
    margin-left: 5em;
}
Copier après la connexion

Dessiner le contour du bouchon :

.head {
    width: 8.5em;
    height: 8.5em;
    border-radius: 2em 0 0 2em;
}
Copier après la connexion

Dessiner le contour des broches sur la fiche :

.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;
}
Copier après la connexion

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

.body {
    width: 15.5em;
    height: 11em;
    border-radius: 0.5em;
}
Copier après la connexion

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

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

.body::before {
    content: &#39;&#39;;
    position: absolute;
    width: 13.5em;
    height: 6em;
    left: 15.5em;
}
Copier après la connexion

Dessinez la partie d'extension du câble :

.body::after {
    content: &#39;&#39;;
    position: absolute;
    width: 100vh;
    height: 3.9em;
    left: calc(15.5em + 13.5em);
}
Copier après la connexion

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

body {
    overflow: hidden;
}
Copier après la connexion

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
        );
}
Copier après la connexion

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
        );
}
Copier après la connexion

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%)
    );
}
Copier après la connexion

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%
        );
}
Copier après la connexion

Dessinez les broches sur la fiche :

.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;
}
Copier après la connexion

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%
        );
}
Copier après la connexion

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
        );
}
Copier après la connexion

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
        );
}
Copier après la connexion

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);
    }
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal