css简单易懂的加载动画，看不会算我输好吧

效果展示

loading2

步骤

第一阶段

先准备结构，并且放置12个div，每一个div旋转30*n度，做一个圆圈

dom

<div class="modal"><div class="loading"><div class="item1"></div><div class="item2"></div><div class="item3"></div><div class="item4"></div><div class="item5"></div><div class="item6"></div><div class="item7"></div><div class="item8"></div><div class="item9"></div><div class="item10"></div><div class="item11"></div><div class="item12"></div></div>
</div>

css

.modal {position: relative;height: 100vh;display: flex;justify-content: center;align-items: center;background: #5b5b5b;
}
.loading div {position: absolute;width: 5px;height: 20px;background-color: orange;border-radius: 10px;
}.loading .item1 {transform: rotate(0deg) translate(0, 120%);animation-delay: 0s;
}.loading .item2 {transform: rotate(30deg) translate(0, 120%);animation-delay: 0s;
}.loading .item3 {transform: rotate(60deg) translate(0, 120%);animation-delay: 0s;
}.loading .item4 {transform: rotate(90deg) translate(0, 120%);animation-delay: 0s;
}.loading .item5 {transform: rotate(120deg) translate(0, 120%);animation-delay: 0s;
}.loading .item6 {transform: rotate(150deg) translate(0, 120%);animation-delay: 0s;
}.loading .item7 {transform: rotate(180deg) translate(0, 120%);animation-delay: 0s;
}.loading .item8 {transform: rotate(210deg) translate(0, 120%);animation-delay: 0s;
}.loading .item9 {transform: rotate(240deg) translate(0, 120%);animation-delay: 0s;
}.loading .item10 {transform: rotate(270deg) translate(0, 120%);animation-delay: 0s;
}.loading .item11 {transform: rotate(300deg) translate(0, 120%);animation-delay: 0s;
}.loading .item12 {transform: rotate(330deg) translate(0, 120%);animation-delay: 0s;
}

第二阶段

使用 @keyframes 透明度变化制作一个一闪一闪的效果

loading1

第三阶段

错开时间的delay，让一闪一闪的动画错开，形成转圈的效果

Css

.modal {position: relative;height: 100vh;display: flex;justify-content: center;align-items: center;background: #5b5b5b;
}.loading div {position: absolute;width: 5px;height: 20px;background-color: orange;border-radius: 10px;animation: loading 1.2s linear infinite;
}@keyframes loading {from {opacity: 1;}to{opacity: 0.15;}
}.loading .item1 {transform: rotate(0deg) translate(0, 120%);animation-delay: -1.2s;
}.loading .item2 {transform: rotate(30deg) translate(0, 120%);animation-delay: -1.1s;
}.loading .item3 {transform: rotate(60deg) translate(0, 120%);animation-delay: -1s;
}.loading .item4 {transform: rotate(90deg) translate(0, 120%);animation-delay: -0.9s;
}.loading .item5 {transform: rotate(120deg) translate(0, 120%);animation-delay: -0.8s;
}.loading .item6 {transform: rotate(150deg) translate(0, 120%);animation-delay: -0.7s;
}.loading .item7 {transform: rotate(180deg) translate(0, 120%);animation-delay: -0.6s;
}.loading .item8 {transform: rotate(210deg) translate(0, 120%);animation-delay: -0.5s;
}.loading .item9 {transform: rotate(240deg) translate(0, 120%);animation-delay: -0.4s;
}.loading .item10 {transform: rotate(270deg) translate(0, 120%);animation-delay: -0.3s;
}.loading .item11 {transform: rotate(300deg) translate(0, 120%);animation-delay: -0.2s;
}.loading .item12 {transform: rotate(330deg) translate(0, 120%);animation-delay: -0.1s;
}