資訊專欄INFORMATION COLUMN
摘要：可交互視頻教程此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從下載代碼解讀定義，容器中包含個子元素居中顯示定義均衡器的樣式定義均衡器豎條的動畫效果最后，設(shè)置各豎條依次動畫大功告成
效果預(yù)覽
按下右側(cè)的“點擊預(yù)覽”按鈕可以在當(dāng)前頁面預(yù)覽，點擊鏈接可以全屏預(yù)覽。
https://codepen.io/comehope/pen/oybWBy
可交互視頻教程此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cG64puy
源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從 github 下載：
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom，容器中包含 5 個子元素：
居中顯示：
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
定義均衡器的樣式：
.equalizer {
width: 10em;
height: 10em;
display: flex;
justify-content: space-between;
}
.equalizer span {
width: 1.5em;
background: linear-gradient(0deg, green, yellow, red);
}
定義均衡器豎條的動畫效果：
.equalizer span {
animation: up-and-down 2s linear infinite;
}
@keyframes up-and-down{
0%, 100% {
clip-path: inset(27% 0 0 0);
}
10% {
clip-path: inset(17% 0 0 0);
}
20% {
clip-path: inset(55% 0 0 0);
}
30% {
clip-path: inset(30% 0 0 0);
}
40% {
clip-path: inset(13% 0 0 0);
}
50% {
clip-path: inset(38% 0 0 0);
}
60% {
clip-path: inset(80% 0 0 0);
}
70% {
clip-path: inset(21% 0 0 0);
}
80% {
clip-path: inset(0% 0 0 0);
}
90% {
clip-path: inset(36% 0 0 0);
}
}
最后，設(shè)置各豎條依次動畫：
.equalizer span {
animation: up-and-down 2s linear infinite calc(-1 * 0.4s * (var(--n) - 1));
}
.equalizer span:nth-child(1) {
--n: 1;
}
.equalizer span:nth-child(2) {
--n: 2;
}
.equalizer span:nth-child(3) {
--n: 3;
}
.equalizer span:nth-child(4) {
--n: 4;
}
.equalizer span:nth-child(5) {
--n: 5;
}
大功告成！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/52459.html
摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發(fā)布的項目前端每日實戰(zhàn)專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細(xì)的代碼解讀，是學(xué)習(xí)前端開發(fā)的活的參考書視頻演示如何用純創(chuàng)作一個表達(dá)懷念童年心情的條紋彩虹心特效視頻演示如 過往項目 2018 年 5 月份項目匯總（共 30 個項目） 2018 年 4 月份項目匯總（共 8 個項目） 2018 年 6 月份發(fā)布的項目 ...
摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發(fā)布的項目前端每日實戰(zhàn)專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細(xì)的代碼解讀，是學(xué)習(xí)前端開發(fā)的活的參考書視頻演示如何用純創(chuàng)作一個表達(dá)懷念童年心情的條紋彩虹心特效視頻演示如 過往項目 2018 年 5 月份項目匯總（共 30 個項目） 2018 年 4 月份項目匯總（共 8 個項目） 2018 年 6 月份發(fā)布的項目 ...
摘要：可交互視頻教程此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從下載代碼解讀定義，容器中包含個子元素居中顯示定義均衡器的樣式定義均衡器豎條的動畫效果最后，設(shè)置各豎條依次動畫大功告成 showImg(https://segmentfault.com/img/bVbfmKG?w=400&h=304); 效果預(yù)覽 按下右側(cè)的點擊預(yù)覽按鈕可以在...
閱讀 2733·2023-04-25 14:15
閱讀 2685·2021-11-04 16:11
閱讀 3385·2021-10-14 09:42
閱讀 434·2019-08-30 15:52
閱讀 2819·2019-08-30 14:03
閱讀 3536·2019-08-30 13:00
閱讀 2105·2019-08-26 11:40
閱讀 3301·2019-08-26 10:25
