摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
效果預覽
按下右側的“點擊預覽”按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/EpWagM
可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cZwGRTL
源代碼下載每日前端實戰系列的全部源代碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom,只有 1 個元素:
居中顯示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(floralwhite, wheat); }
定義容器尺寸:
.fridge { width: 24em; height: 38em; font-size: 10px; }
畫出冰箱的輪廓:
.fridge { border-top: 1em solid #333; border-bottom: 1em solid #333; background: silver; border-radius: 4em / 0.5em; box-shadow: 0 0.5em 1em -0.5em rgba(0, 0, 0, 0.5); }
用線性漸變畫出冰箱的金屬表面:
.fridge { background: linear-gradient( to right, darkgray, lightgray 10%, silver 40%, silver 80%, darkgray 90%, dimgray ); }
再用線性漸變畫出冰箱的把手:
.fridge { background: linear-gradient( to right, transparent 40%, gray 40%, silver 41%, dimgray 43%, transparent 43%, transparent 48%, gray 48%, silver 49%, dimgray 51%, transparent 51% ) no-repeat center / 100% 90%, /* handles */ linear-gradient( to right, darkgray, lightgray 10%, silver 40%, silver 80%, darkgray 90%, dimgray ); }
在冰箱表面的線性漸變中加畫門縫:
.fridge { background: linear-gradient( to right, transparent 40%, gray 40%, silver 41%, dimgray 43%, transparent 43%, transparent 48%, gray 48%, silver 49%, dimgray 51%, transparent 51% ) no-repeat center / 100% 90%, /* handles */ linear-gradient( to right, darkgray, lightgray 10%, silver 40%, silver 45%, black 45%, black 46%, silver 46%, silver 80%, darkgray 90%, dimgray ); }
用 before 偽元素畫出飲水機的輪廓:
.fridge::before { content: ""; position: absolute; width: 6em; height: 7.5em; background: black; top: calc((100% - 7.5em) / 2); left: 2.5em; }
用線性漸變畫出飲水機的擋板,用徑向漸變畫出飲水機的出水口:
.fridge::before { background: radial-gradient( circle at 50% 22%, black, black 1em, transparent 1em ), linear-gradient( transparent 25%, #222 25% ) no-repeat center top / 94% 98%, black; }
再用徑向漸變畫出 4 個 led 燈:
.fridge::before { background: radial-gradient( circle at 88% 10%, limegreen, limegreen 0.2em, transparent 0.2em ), radial-gradient( circle at 75% 10%, hotpink, hotpink 0.2em, transparent 0.2em ), radial-gradient( circle at 25% 10%, dodgerblue, dodgerblue 0.2em, transparent 0.2em ), radial-gradient( circle at 12% 10%, gold, gold 0.2em, transparent 0.2em ), radial-gradient( circle at 50% 22%, black, black 1em, transparent 1em ), linear-gradient( transparent 25%, #222 25% ) no-repeat center top / 94% 98%, black; }
用 after 偽元素畫出杯子的輪廓:
.fridge::after { content: ""; position: absolute; width: 2em; height: 3em; background: deepskyblue; bottom: calc((100% - 7.5em) / 2); left: calc(2.5em + (6em - 2em) / 2); }
稍稍修整杯子的形狀,使其頂大底小:
.fridge::after { clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%); }
讓杯子頂部的顏色變淺,看起來好像杯里有水的樣子:
.fridge::after { background: linear-gradient( to bottom, lightskyblue 25%, transparent 25% ), deepskyblue; }
最后,給水里加些氣泡:
.fridge::after { background: radial-gradient( circle at 35% 40%, lightblue, lightblue 0.1em, transparent 0.4em ), radial-gradient( circle at 65% 60%, lightblue, lightblue 0.1em, transparent 0.3em ), radial-gradient( circle at 45% 80%, lightblue, lightblue 0.1em, transparent 0.2em ), linear-gradient( to bottom, lightskyblue 25%, transparent 25% ), deepskyblue; }
大功告成!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/113511.html
摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbd9tL?w=400&h=300); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。 https://codepen.io/comehop...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書視頻演示如何用純創作一臺咖啡機視頻演示如何用 過往項目 2018 年 6 月份項目匯總(共 27 個項目) 2018 年 5 月份項目匯總(共 30 個項目) 2018 年 4 月份項目匯總(...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書視頻演示如何用純創作一臺咖啡機視頻演示如何用 過往項目 2018 年 6 月份項目匯總(共 27 個項目) 2018 年 5 月份項目匯總(共 30 個項目) 2018 年 4 月份項目匯總(...
閱讀 3715·2021-10-14 09:43
閱讀 3311·2021-08-25 09:38
閱讀 609·2019-08-30 15:55
閱讀 1343·2019-08-30 13:05
閱讀 2238·2019-08-29 16:05
閱讀 501·2019-08-29 12:58
閱讀 2791·2019-08-29 12:34
閱讀 3241·2019-08-26 12:15