資訊專欄INFORMATION COLUMN
摘要：可交互視頻此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從下載代碼解讀定義，只有一個元素居中顯示定義容器尺寸畫出字母的形狀增加下部矩形的旋轉(zhuǎn)效果增加上部小球的跳動效果大功告成
效果預覽
按下右側(cè)的“點擊預覽”按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/pZbrpJ
可交互視頻此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cq9pZhN
源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從 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: black;
}
定義容器尺寸：
.loader {
width: 8em;
height: 10em;
font-size: 10px;
}
畫出字母 i 的形狀：
.loader {
display: flex;
flex-direction: column;
align-items: center;
}
.loader::before {
content: "";
width: 5em;
height: 5em;
background-color: orangered;
border-radius: 50%;
}
.loader::after {
content: "";
width: 5em;
height: 8em;
background-color: orange;
border-radius: 0.5em;
}
增加下部矩形的旋轉(zhuǎn)效果：
.loader::after {
animation: rect-rotating 1s ease-in-out infinite;
}
@keyframes rect-rotating {
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(180deg);
}
}
增加上部小球的跳動效果：
.loader::before {
animation: ball-jumping 1s ease-in-out infinite;
}
@keyframes ball-jumping {
20%, 80% {
transform: translateY(-2em);
}
50% {
transform: translateY(calc((8em - 5em) / 2));
}
}
大功告成！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116904.html
摘要：可交互視頻此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從下載代碼解讀定義，只有一個元素居中顯示定義容器尺寸畫出字母的形狀增加下部矩形的旋轉(zhuǎn)效果增加上部小球的跳動效果大功告成 showImg(https://segmentfault.com/img/bVbdUWJ?w=400&h=301); 效果預覽 按下右側(cè)的點擊預覽按鈕可以在當前...
摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發(fā)布的項目前端每日實戰(zhàn)專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發(fā)的活的參考書視頻演示如何用純創(chuàng)作一臺咖啡機視頻演示如何用 過往項目 2018 年 6 月份項目匯總（共 27 個項目） 2018 年 5 月份項目匯總（共 30 個項目） 2018 年 4 月份項目匯總（...
摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發(fā)布的項目前端每日實戰(zhàn)專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發(fā)的活的參考書視頻演示如何用純創(chuàng)作一臺咖啡機視頻演示如何用 過往項目 2018 年 6 月份項目匯總（共 27 個項目） 2018 年 5 月份項目匯總（共 30 個項目） 2018 年 4 月份項目匯總（...
閱讀 1318·2023-04-26 01:03
閱讀 1953·2021-11-23 09:51
閱讀 3319·2021-11-22 15:24
閱讀 2678·2021-09-22 15:18
閱讀 1026·2019-08-30 15:55
閱讀 3507·2019-08-30 15:54
閱讀 2274·2019-08-30 15:53
閱讀 2406·2019-08-30 15:44
