An example of how to create a lightning cable with CSS language

Effect Preview

Press the "Click to Preview" button on the right to preview the current page and click on the link to preview it in full screen.

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

Interactive video

This video is interactive, you can pause the video at any time, edit the code in the video.

Please open the watch with Chrome, Safari, Edge.

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

Code interpretation

Defines the DOM, which contains 2 elements, representing plugs and cables, respectively:

<p class= "Cable" >    <span class= "Head" ></span>    <span class= "Body" ></span>< /p>

Center display:

body {    margin:0;    HEIGHT:100VH;    Display:flex;    Align-items:center;}

Define Container Dimensions:

. cable {    Display:flex;    Align-items:center;    font-size:10px;    Margin-left:5em;}

Draw the contour of the plug:

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

Draw the outline of the pins on the plug:

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

Draw the outline of the hand-held part of the cable:

. body {    width:15.5em;    Height:11em;    Border-radius:0.5em;}

Draw the outline of a slightly thicker part of the cable:

. body {    position:relative;    Display:flex;    Align-items:center;}. Body::before {    content: ';    Position:absolute;    width:13.5em;    Height:6em;    Left:15.5em;}

Draw the extension cable part:

. body::after {    content: ';    Position:absolute;    WIDTH:100VH;    Height:3.9em;    Left:calc (15.5em + 13.5em);}

Hide the outside of the screen:

body {    Overflow:hidden;}

Next draw the details.
To apply a gradient color to the extension cord:

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

To apply a gradient color to a slightly thicker part of the cable:

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

To apply a gradient color to the handheld part of the cable:

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

To apply a gradient color to the plug:

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

To draw a pin on the plug:

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

Next, add a shadow to make the cable more solid.
Draw the shadow on the plug:

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

Draw the shadow of the handheld part of the cable:

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

Draw a shadow in a slightly thicker part of the cable:

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

Finally, add the entry animation for the screen

. cable {    animation:show 5s linear Infinite;} @keyframes Show {    0% {        Transform:translatex (100VW);    }    20%, 100% {        Transform:translatex (0);    }}

Done!