執行個體講解如何用CSS語言創作一根閃電連接線

效果預覽

按下右側的“點擊預覽”按鈕可以在當前頁面預覽，點選連結可以全屏預覽。

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

可互動視頻

此視頻是可以互動的，你可以隨時暫停視頻，編輯視頻中的代碼。

請用 chrome, safari, edge 開啟觀看。

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

代碼解讀

定義 dom，容器中包含 2 個元素，分別代表插頭和線纜：

<p class="cable">    <span class="head"></span>    <span class="body"></span></p>

置中顯示：

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

大功告成！