資訊專欄INFORMATION COLUMN
摘要：效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。
效果預覽
按下右側的“點擊預覽”按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/gKxyWo
可交互視頻此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cg48mty
源代碼下載每日前端實戰系列的全部源代碼請從 github 下載：
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom，容器中包含一個圓環和3個小球：
居中顯示：
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: darkslategray;
}
改變盒模型：
* {
box-sizing: border-box;
}
畫出圓環：
.container {
position: relative;
font-size: 20px;
}
.ring {
position: relative;
width: 10em;
height: 10em;
border: 1.5em solid paleturquoise;
border-radius: 50%;
}
在圓環的左上方畫出一個小球：
.sphere {
position: absolute;
top: -20%;
left: -20%;
}
.sphere::after {
content: "";
position: absolute;
width: 3em;
height: 3em;
background-color: lightseagreen;
border-radius: 50%;
}
讓小球在圓環的左上方盤旋：
.sphere {
width: 80%;
height: 80%;
animation: rotate 1.5s linear infinite;
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
讓小球的圓環的上下穿梭：
.ring {
z-index: 2;
}
.sphere {
animation:
rotate 1.5s linear infinite,
overlapping 1.5s linear infinite;
}
@keyframes overlapping {
to {
z-index: 2;
}
}
通過設置動畫延時，制造 3 個小球同時盤旋的效果：
.sphere:nth-child(2) {
animation-delay: -0.5s;
}
.sphere:nth-child(3) {
animation-delay: -1s;
}
最后，讓容器轉動起來，制造小球圍繞圓環盤旋的效果：
.container {
animation: rotate 5s linear infinite;
}
大功告成！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113503.html
摘要：效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽?？山换ヒ曨l此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbfmMe?w=400&h=307); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 https://codepen.io/comehop...
摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發的活的參考書視頻演示如何用純創作一個表達懷念童年心情的條紋彩虹心特效視頻演示如 過往項目 2018 年 5 月份項目匯總（共 30 個項目） 2018 年 4 月份項目匯總（共 8 個項目） 2018 年 6 月份發布的項目 ...
摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發的活的參考書視頻演示如何用純創作一個表達懷念童年心情的條紋彩虹心特效視頻演示如 過往項目 2018 年 5 月份項目匯總（共 30 個項目） 2018 年 4 月份項目匯總（共 8 個項目） 2018 年 6 月份發布的項目 ...
閱讀 1386·2021-11-04 16:11
閱讀 3046·2021-10-12 10:11
閱讀 2980·2021-09-29 09:47
閱讀 1618·2021-09-22 15:40
閱讀 1016·2019-08-29 15:43
閱讀 2807·2019-08-29 13:50
閱讀 1582·2019-08-29 13:28
閱讀 2693·2019-08-29 12:54
