效果展示
Demo代碼
HTML
Document
CSS
html,body{
margin: 0;
height: 100%;
}
body{
display: flex;
justify-content: center;
align-items: center;
background: #263238;
}
section {
width: 650px;
height: 300px;
padding: 10px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid red;
}
.loader-1 {
width : 96px;
height: 96px;
background: orange;
border: 10px solid #FFF;
border-bottom-color: #FF3D00;
border-radius: 50%;
display: inline-block;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg) }
}
原了解釋
步驟1:生成一個邊長為96px的正方形
css代碼
width : 96px;
height: 96px;
background: orange;
效果圖如下
步驟2:設定該正方形的border
border: 10px solid #FFF;
注
- 橙色部分還是96px✖️96px,因為border寬度為10px,是以使得span實際大小為116✖️116px
步驟3:設定下邊框為紅色(重點!)
border-bottom-color: #FF3D00;//設定下邊框顔色
步驟4:設定border-radious=50%,将正方形變成圓形
步驟5:設定動畫,繞中心一直旋轉
animation: rotation 1s linear infinite;
// 動畫實作
@keyframes rotation {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}