點(diǎn)擊下載
本文文檔

當(dāng)前位置：首頁(yè) - 科技 - 知識(shí)百科 - 正文

實(shí)例講解如何用CSS語(yǔ)言創(chuàng)作一根閃電連接線

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 18:47:50

實(shí)例講解如何用CSS語(yǔ)言創(chuàng)作一根閃電連接線

實(shí)例講解如何用CSS語(yǔ)言創(chuàng)作一根閃電連接線:效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。https://codepen.io/comehope/pen/RBjdzZ可交互視頻此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。請(qǐng)用 chrome, safari, edge 打開觀看。http

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀實(shí)例講解如何用CSS語(yǔ)言創(chuàng)作一根閃電連接線:效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。https://codepen.io/comehope/pen/RBjdzZ可交互視頻此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。請(qǐng)用 chrome, safari, edge 打開觀看。http

效果預(yù)覽

按下右側(cè)的“點(diǎn)擊預(yù)覽”按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。

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

可交互視頻

此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。

請(qǐng)用 chrome, safari, edge 打開觀看。

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

代碼解讀

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

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

畫出線纜的延長(zhǎng)線部分：

.body::after {
 content: '';
 position: absolute;
 width: 100vh;
 height: 3.9em;
 left: calc(15.5em + 13.5em);
}

隱藏畫面外的部分：

body {
 overflow: hidden;
}

接下來(lái)繪制細(xì)節(jié)。
為延長(zhǎng)線涂上漸變色：

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

接下來(lái)添加陰影，使線纜更立體。
繪制插頭上的陰影：

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

最后，為畫面增加入場(chǎng)動(dòng)畫

.cable {
 animation: show 5s linear infinite;
}

@keyframes show {
 0% {
 transform: translateX(100vw);
 }

 20%, 100% {
 transform: translateX(0);
 }
}

大功告成！

相關(guān)文章：

使用純CSS3創(chuàng)建一個(gè)紡錘形分隔線

如何使用純CSS3創(chuàng)建一個(gè)簡(jiǎn)單的五角星圖形

相關(guān)視頻：

CSS動(dòng)畫實(shí)用技巧視頻教程

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com