效果预览

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

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

大功告成！