效果预览

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。

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

可交互视频

此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

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

源代码下载

每日前端实战系列的全部源代码请从 github 下载：

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom，容器中包含 2 个元素，分别代表插头和线缆：

<div class="cable">

    <span class="head"></span>

    <span class="body"></span>

</div>

居中显示：

body {

    margin: 0;

    height: 100vh;

    display: flex;

    align-items: center;

}

定义容器尺寸：

.cable {

    display: flex;

    align-items: center;

    font-size: 10px;

    margin-left: 5em;

}

画出插头的轮廓：

.head {

    width: 8.5em;

    height: 8.5em;

    border-radius: 2em 0 0 2em;

}

画出插头上针脚的轮廓：

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

}

画出线缆中手持部位的轮廓：

.body {

    width: 15.5em;

    height: 11em;

    border-radius: 0.5em;

}

画出线缆中稍粗部位的轮廓：

.body {

    position: relative;

    display: flex;

    align-items: center;

}

.body::before {

    content: '';

    position: absolute;

    width: 13.5em;

    height: 6em;

    left: 15.5em;

}

画出线缆的延长线部分：

.body::after {

    content: '';

    position: absolute;

    width: 100vh;

    height: 3.9em;

    left: calc(15.5em + 13.5em);

}

隐藏画面外的部分：

body {

    overflow: hidden;

}

接下来绘制细节。
为延长线涂上渐变色：

.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

        );

}

为线缆中稍粗部位涂上渐变色：

.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

        );

}

为线缆中手持部位涂上渐变色：

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

    );

}

为插头涂上渐变色：

.head {

    background:

        linear-gradient(

            -45deg,

            hsl(0, 0%, 75%),

            hsl(0, 0%, 79%),

            hsl(0, 0%, 78%),

            hsl(0, 0%, 87%) 80%

        );

}

在插头上画出针脚：

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

}

接下来添加阴影，使线缆更立体。
绘制插头上的阴影：

.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%

        );

}

绘制线缆手持部分的阴影：

.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

        );

}

绘制线缆中稍粗部位的阴影：

.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

        );

}

最后，为画面增加入场动画

.cable {

    animation: show 5s linear infinite;

}

@keyframes show {

    0% {

        transform: translateX(100vw);

    }

    20%, 100% {

        transform: translateX(0);

    }

}

大功告成！