資訊專欄INFORMATION COLUMN
摘要：效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽?？山换ヒ曨l此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。
效果預覽
按下右側的“點擊預覽”按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/mGbpqv
可交互視頻此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cMwkJhG
源代碼下載每日前端實戰系列的全部源代碼請從 github 下載：
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom，導航中包含一個無序列表，列表中有一個列表項：
居中顯示：
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: teal;
}
隱藏列表項前端的引導符號：
nav ul {
padding: 0;
list-style-type: none;
}
定義按鈕容器尺寸：
:root {
font-size: 10px;
}
nav li {
width: 20rem;
height: 7rem;
}
設置文字樣式：
nav li {
font-size: 20px;
text-align: center;
line-height: 7rem;
font-family: sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
}
用偽元素制作 2 個背景色塊：
nav li {
position: relative;
}
nav li::before,
nav li::after {
content: "";
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;
}
nav li::before {
background-color: white;
z-index: -1;
}
nav li::after {
background-color: goldenrod;
z-index: -2;
}
讓后面的背景塊向右下偏移，并且讓前面的背景塊投放陰影，增加立體效果：
nav li::before {
box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
}
nav li::after {
transform: translate(1.5rem, 1.5rem);
}
接下來增加懸停效果。
設置緩動時間，主元素和偽元素都將有緩動效果：
nav li {
transition: 0.3s;
}
nav li::before,
nav li::after {
transition: 0.3s;
}
當懸停時，2 個背景色塊的顏色互換：
nav li:hover::before {
background-color: goldenrod;
}
nav li:hover::after {
background-color: white;
}
同時，后面的背景色塊的向左上方移動，按鈕整體則向右下方移動：
nav li:hover {
transform: translate(1.5rem, 1.5rem);
}
nav li:hover::after {
transform: translate(-1.5rem, -1.5rem);
}
同時，再讓文本在懸停時變色：
nav li:hover {
color: white;
}
再增加幾個按鈕：
最后，增加按鈕之間的間距：
nav li {
margin: 3rem;
}
大功告成！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52908.html
摘要：效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbfAqJ?w=400&h=301); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 https://codepen.io/comehop...
摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發的活的參考書 過往項目 2018 年 8 月份項目匯總（共 29 個項目） 2018 年 7 月份項目匯總（共 29 個項目） 2018 年 6 月份項目匯總（...
摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發的活的參考書 過往項目 2018 年 8 月份項目匯總（共 29 個項目） 2018 年 7 月份項目匯總（共 29 個項目） 2018 年 6 月份項目匯總（...
閱讀 2167·2021-11-24 09:39
閱讀 2781·2021-07-29 13:49
閱讀 2322·2019-08-29 14:15
閱讀 2233·2019-08-29 12:40
閱讀 3312·2019-08-26 13:42
閱讀 632·2019-08-26 12:13
閱讀 2065·2019-08-26 11:41
閱讀 3345·2019-08-23 18:32
