效果预览

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

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

大功告成！