新年加载中特效 —— 后期需要添加备注和消化

代码来源：链接: https://www.bilibili.com/video/BV1qA4m1573V/?spm_id_from=333.880.my_history.page.click&vd_source=b91967c499b23106586d7aa35af46413

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>新年加载中特效</title>
</head><body><div class="loading"><div>! </div><div>中</div><div>载</div><div>加</div><div>节</div><div>春</div></div><style>body {background: linear-gradient(to right, #da3205, #fb6029);}.loading {position: absolute;width: 600px;height: 50px;line-height: 50px;left: 50%;top: 40%;margin-left: -300px;font-size: 30px;font-weight: bold;color: #fed26f;/* 设置文本颜色为黄色 */text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);overflow: visible;user-select: none;cursor: default;}.loading div {position: absolute;width: 50px;animation: move 2.6s linear infinite;transform: rotate(180deg);}.loading div:nth-child(2) {animation-delay: 0.4s;}.loading div:nth-child(3) {animation-delay: 0.8s;}.loading div:nth-child(4) {animation-delay: 1.2s;}.loading div:nth-child(5) {animation-delay: 1.6s;}.loading div:nth-child(6) {animation-delay: 2s;}.loading div:nth-child(7) {animation-delay: 2.4s;}@keyframes move {0% {left: 0;opacity: 0;}35% {left: 41%;transform: rotate(0deg);opacity: 1;}65% {left: 59%;transform: rotate(0deg);opacity: 1;}100% {left: 100%;transform: rotate(-180deg);opacity: 0;}}</style>
</body></html>