.loading { width:30px; height:30px; display:inline-block; border:3px solid #ccc; border-radius:50%; /* 将正方形的div变成圆环 */ border-top:3px solid #1F9FFF; /* 将上边框改成蓝色 */ } /* 定义动画 */ @keyframes loadingAnimation { /* 动画开始 */ 0% { transform:rotate(0deg); } /* 动画结束 */ 100% { transform:rotate(360deg); } }/* 添加动画 */ .loading { animation:loadingAnimation 1s infinite linear; }
更新时间:2021-01-07 01:30:11
借助于border-radius制作圆环,用animation让圆环动起来