資訊專欄INFORMATION COLUMN
摘要：效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽?？山换ヒ曨l此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。
效果預覽
按下右側的“點擊預覽”按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/mjVVmY
可交互視頻此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cewvyhq
源代碼下載每日前端實戰系列的全部源代碼請從 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: radial-gradient(circle at center, darkred, black);
}
定義容器尺寸：
.mcdonalds {
width: 36em;
height: 30em;
font-size: 5px;
color: red;
background-color: currentColor;
}
用偽元素畫出字母 m 的左半邊 n 的形狀：
.mcdonalds {
position: relative;
overflow: hidden;
}
.mcdonalds::before {
content: "";
position: absolute;
width: 20em;
height: calc(30em * 2);
box-sizing: border-box;
border: solid yellow;
border-width: 2.2em 4.4em;
border-radius: 50%;
}
把左半邊復制一份，即是右半邊 n 的形狀，和左邊一起組成了字母 m：
.mcdonalds::before {
filter: drop-shadow(16em 0 0 yellow);
}
用偽元素遮住字母 m 中間豎線底部一點點，使兩邊的豎顯得長一些：
.mcdonalds::after {
content: "";
position: absolute;
width: 6em;
height: 1.5em;
background-color: currentColor;
left: calc((36em - 6em) / 2);
bottom: 0;
}
最后，將紅色背景向外延伸一些：
.mcdonalds {
box-shadow: 0 0 0 10em;
}
大功告成！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116895.html
摘要：效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbdMrt?w=400&h=400); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 https://codepen.io/comehop...
摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發的活的參考書視頻演示如何用純創作一臺咖啡機視頻演示如何用 過往項目 2018 年 6 月份項目匯總（共 27 個項目） 2018 年 5 月份項目匯總（共 30 個項目） 2018 年 4 月份項目匯總（...
摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發的活的參考書視頻演示如何用純創作一臺咖啡機視頻演示如何用 過往項目 2018 年 6 月份項目匯總（共 27 個項目） 2018 年 5 月份項目匯總（共 30 個項目） 2018 年 4 月份項目匯總（...
閱讀 1413·2021-11-22 09:34
閱讀 1383·2021-09-22 14:57
閱讀 3416·2021-09-10 10:50
閱讀 1397·2019-08-30 15:54
閱讀 3695·2019-08-29 17:02
閱讀 3478·2019-08-29 12:54
閱讀 2621·2019-08-27 10:57
閱讀 3324·2019-08-26 12:24
