資訊專欄INFORMATION COLUMN
摘要：源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從下載代碼解讀定義，容器中只包含個按鈕定義按鈕樣式用偽元素增加個傾斜的矩形增加鼠標(biāo)劃過效果中增加幾個按鈕，形成一組按鈕按鈕之間為鼠標(biāo)劃過效果留出邊距再增加兩組按鈕最后，嘗試一些變化大功告成
效果預(yù)覽
按下右側(cè)的“點擊預(yù)覽”按鈕可以在當(dāng)前頁面預(yù)覽，點擊鏈接可以全屏預(yù)覽。
https://codepen.io/comehope/pen/xjoOeM
可交互視頻教程此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/c/cQ74NAJ
源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從 github 下載：
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義dom，容器中只包含 1 個按鈕：
定義按鈕樣式：
nav {
--h: 3em;
}
nav ul {
padding: 0;
}
nav ul li {
list-style-type: none;
width: calc(var(--h) * 1.732);
height: var(--h);
background-color: #333;
color: white;
font-family: sans-serif;
text-align: center;
line-height: var(--h);
}
用偽元素增加2個傾斜的矩形：
nav ul li {
position: relative;
}
nav ul li::before,
nav ul li::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
background-color: #333;
}
nav ul li::before{
transform: rotate(60deg) translateX(calc(var(--h) * -2));
}
nav ul li::after{
transform: rotate(-60deg) translateX(calc(var(--h) * 2));
}
增加鼠標(biāo)劃過效果：
nav ul li::before,
nav ul li::after {
z-index: -1;
filter: opacity(0);
transition: 0.3s;
}
nav ul li:hover::before {
filter: opacity(1);
transform: rotate(60deg) translateX(0);
}
nav ul li:hover::after {
filter: opacity(1);
transform: rotate(-60deg) translateX(0);
}
dom 中增加幾個按鈕，形成一組按鈕：
按鈕之間為鼠標(biāo)劃過效果留出邊距：
nav ul li {
margin: 2em;
}
再增加兩組按鈕：
最后，嘗試一些變化：
nav {
--h: 3em;
}
nav:nth-child(1) {
--rate: 1.5;
--bgcolor: black;
}
nav:nth-child(2) {
--rate: 1.732;
--bgcolor: brown;
}
nav:nth-child(3) {
--rate: 2;
--bgcolor: green;
}
nav ul li {
width: calc(var(--h) * var(--rate));
background-color: var(--bgcolor);
}
nav ul li::before,
nav ul li::after {
background-color: var(--bgcolor);
}
大功告成！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52426.html
摘要：過往項目年月份項目匯總共個項目年月份發(fā)布的項目前端每日實戰(zhàn)專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學(xué)習(xí)前端開發(fā)的活的參考書頻演示如何用純創(chuàng)作一種按鈕被瞄準(zhǔn)的交互特效視頻演示如何用純創(chuàng)作一個同心圓弧旋轉(zhuǎn)特效視頻演 過往項目 2018 年 4 月份項目匯總（共 8 個項目） 2018 年 5 月份發(fā)布的項目 《前端每日實戰(zhàn)》專欄每天分解一個前端項目，用視頻記錄...
摘要：過往項目年月份項目匯總共個項目年月份發(fā)布的項目前端每日實戰(zhàn)專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學(xué)習(xí)前端開發(fā)的活的參考書頻演示如何用純創(chuàng)作一種按鈕被瞄準(zhǔn)的交互特效視頻演示如何用純創(chuàng)作一個同心圓弧旋轉(zhuǎn)特效視頻演 過往項目 2018 年 4 月份項目匯總（共 8 個項目） 2018 年 5 月份發(fā)布的項目 《前端每日實戰(zhàn)》專欄每天分解一個前端項目，用視頻記錄...
摘要：源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從下載代碼解讀定義，容器中只包含個按鈕定義按鈕樣式用偽元素增加個傾斜的矩形增加鼠標(biāo)劃過效果中增加幾個按鈕，形成一組按鈕按鈕之間為鼠標(biāo)劃過效果留出邊距再增加兩組按鈕最后，嘗試一些變化大功告成 showImg(https://segmentfault.com/img/bVbcWKT?w=500&h=500); 效果預(yù)覽 按下右側(cè)的點擊預(yù)覽按鈕可以在當(dāng)...
閱讀 3967·2021-11-24 09:38
閱讀 1442·2021-11-19 09:40
閱讀 2786·2021-11-18 10:02
閱讀 3712·2021-11-09 09:46
閱讀 1783·2021-09-22 15:27
閱讀 3122·2019-08-29 15:24
閱讀 1011·2019-08-29 12:40
閱讀 1695·2019-08-28 18:24
