css实现加载旋转动画

article/2025/11/3 16:32:08

先看效果：

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css加载旋转动画</title><style>*{margin: 0;padding: 0;}.loading-screen{width: 100%;     height: 100vh;background: white;position: fixed;display: flex;align-items: center;justify-content: center;}.loading{width: 80px;display: flex;flex-wrap: wrap;animation: rotate 3s linear infinite;}@keyframes rotate{to{transform: rotate(360deg);}}.loading span{width: 32px;height: 32px;background: red;margin: 4px;animation: scale 1.5s linear infinite;}@keyframes scale{50%{transform: scale(1.2);}}.loading span:nth-child(1){border-radius: 50% 50% 0 50%;background: #e77f67;transform-origin: bottom right;}.loading span:nth-child(2){border-radius: 50% 50% 50% 0;background: #778beb;transform-origin: bottom left;animation-delay: 0.5s;}.loading span:nth-child(3){border-radius: 50% 0 50% 50%;background: #f8a5c2;transform-origin: top right;animation-delay: 1.5s;}.loading span:nth-child(4){border-radius:  0 50% 50% 50%;background: #f5cd79;transform-origin: top left;animation: 1s;}</style>
</head>
<body><div class="loading-screen"><div class="loading"><span></span><span></span><span></span><span></span></div></div>
</body>
</html>

其他小案例：

css实现颜色渐变小动画

css代码实现3D动画翻转 - 鱿鱼游戏卡片制作

css实现旋转的小流星动画

只用js代码实现电子时钟，精确到毫秒

简单的js代码实现主题色切换

点击主页看更多css小动画，js小案例…

我的主页