基礎(chǔ)
/*css文件*/
.loader--spinningDisc {
border: solid 0.5em #9b59b6;
border-right-color: transparent; /*右邊框透明*/
border-left-color: transparent;
padding: 0.5em;
width: 2em;
height: 2em;
border-radius: 50%; /* 做圓角，content和padding也會變圓角*/
background: #3498db;
background-clip: content-box; /*背景不包括border和padding,border-box;padding-box*/
animation: spinDisc 1.5s linear infinite; /*執(zhí)行spinDisc動畫，1.5秒每次，無限循環(huán)*/
}
@keyframes spinDisc {
50% {
border-top-color: #3498db;
border-bottom-color: #3498db;
background-color: #2ecc71;
}
100% {
transform: rotate(1turn); /* 旋轉(zhuǎn)一圈 */
/*90deg = 100grad=0.25turn ≈ 1.57079rad*/
}
}
<!-- HTML 代碼 -->
<div class="loader loader--spinningDisc"></div>
transiton使用
.box{
transiton: width 2s, height 2s,background-color 2s, transform 2s;
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
