資訊專欄INFORMATION COLUMN
摘要：源代碼下載每日前端實戰系列的全部源代碼請從下載代碼解讀定義，容器中包含一組個面居中顯示定義容器尺寸畫出積木的正面畫出積木的右面畫出積木的頂面把以上個面組合成立方體接下來畫積木的凸粒。
效果預覽
按下右側的“點擊預覽”按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/qKKqrv
可交互視頻此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cWm3Vub
源代碼下載每日前端實戰系列的全部源代碼請從 github 下載：
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom，容器中包含一組 3 個面：
居中顯示：
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at center, white, skyblue);
}
定義容器尺寸：
.brick {
width: 40em;
height: 30em;
font-size: 10px;
}
畫出積木的正面：
.brick {
position: relative;
}
.sides .front {
position: absolute;
width: 9em;
height: 6.8em;
background-color: #237fbd;
top: 19em;
left: 7em;
}
畫出積木的右面：
.sides > * {
position: absolute;
background-color: #237fbd;
}
.sides .right {
width: 18em;
height: 6.8em;
filter: brightness(0.8);
top: 19em;
left: calc(7em + 9em);
}
畫出積木的頂面：
.sides .top {
width: 18em;
height: 10.4em;
filter: brightness(1.2);
top: calc(19em - 10.4em);
left: calc(7em + 9em);
}
把以上 3 個面組合成立方體：
.sides .front {
transform-origin: right;
transform: skewY(30deg);
}
.sides .right {
transform-origin: left;
transform: skewY(-30deg);
}
.sides .top {
transform-origin: left bottom;
transform: rotate(-60deg) skewY(30deg);
}
接下來畫積木的凸粒。
在 dom 中增加 8 個凸粒元素：
定義變量：
.studs span:nth-child(1) {
--n: 1;
}
.studs span:nth-child(3) {
--n: 3;
}
.studs span:nth-child(5) {
--n: 5;
}
.studs span:nth-child(7) {
--n: 7;
}
.studs span:nth-child(2) {
--n: 2;
}
.studs span:nth-child(4) {
--n: 4;
}
.studs span:nth-child(6) {
--n: 6;
}
.studs span:nth-child(8) {
--n: 8;
}
畫出左側的凸粒：
.studs span:nth-child(odd) {
top: calc(4.6em + (var(--n) - 1) / 2 * 2.6em);
left: calc(23.3em - (var(--n) - 1) / 2 * 4.6em);
}
畫出右側的凸粒：
.studs span:nth-child(even) {
top: calc(6.9em + (var(--n) - 2) / 2 * 2.6em);
left: calc(27.9em - (var(--n) - 2) / 2 * 4.6em);
}
最后，畫出凸粒的頂面：
.studs span::before {
content: "";
position: absolute;
width: inherit;
height: 2em;
background-color: #4cb7ff;
border-radius: 50%;
}
大功告成！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52540.html
摘要：源代碼下載每日前端實戰系列的全部源代碼請從下載代碼解讀定義，容器中包含一組個面居中顯示定義容器尺寸畫出積木的正面畫出積木的右面畫出積木的頂面把以上個面組合成立方體接下來畫積木的凸粒。 showImg(https://segmentfault.com/img/bVbcEtZ?w=500&h=500); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 https...
摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發的活的參考書視頻演示如何用純創作一個表達懷念童年心情的條紋彩虹心特效視頻演示如 過往項目 2018 年 5 月份項目匯總（共 30 個項目） 2018 年 4 月份項目匯總（共 8 個項目） 2018 年 6 月份發布的項目 ...
摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發的活的參考書視頻演示如何用純創作一個表達懷念童年心情的條紋彩虹心特效視頻演示如 過往項目 2018 年 5 月份項目匯總（共 30 個項目） 2018 年 4 月份項目匯總（共 8 個項目） 2018 年 6 月份發布的項目 ...
閱讀 2014·2021-11-15 11:38
閱讀 2048·2019-08-30 15:55
閱讀 2182·2019-08-30 15:52
閱讀 3167·2019-08-30 14:01
閱讀 2684·2019-08-30 12:47
閱讀 1128·2019-08-29 13:17
閱讀 1062·2019-08-26 13:55
閱讀 2629·2019-08-26 13:46
