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