摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。繪制插頭上的陰影繪制線纜手持部分的陰影繪制線纜中稍粗部位的陰影最后,為畫面增加入場動畫大功告成
效果預覽
按下右側的“點擊預覽”按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。
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 個元素,分別代表插頭和線纜:
</>復制代碼
居中顯示:
</>復制代碼
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);
}
}
大功告成!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52741.html
摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。繪制插頭上的陰影繪制線纜手持部分的陰影繪制線纜中稍粗部位的陰影最后,為畫面增加入場動畫大功告成 showImg(https://segmentfault.com/img/bVbeuTB?w=400&h=300); 效果預覽 按下右側的點擊預覽按鈕可...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書視頻演示如何用純創作一臺咖啡機視頻演示如何用 過往項目 2018 年 6 月份項目匯總(共 27 個項目) 2018 年 5 月份項目匯總(共 30 個項目) 2018 年 4 月份項目匯總(...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書視頻演示如何用純創作一臺咖啡機視頻演示如何用 過往項目 2018 年 6 月份項目匯總(共 27 個項目) 2018 年 5 月份項目匯總(共 30 個項目) 2018 年 4 月份項目匯總(...
閱讀 1626·2021-11-22 13:53
閱讀 2858·2021-11-15 18:10
閱讀 2764·2021-09-23 11:21
閱讀 2509·2019-08-30 15:55
閱讀 483·2019-08-30 13:02
閱讀 759·2019-08-29 17:22
閱讀 1703·2019-08-29 13:56
閱讀 3459·2019-08-29 11:31