最终效果

在日常项目开发中，我们经常需要用到加载动画来提升用户体验。今天分享一个纯CSS实现的圆形旋转加载动画，不仅简洁优雅，而且无需引入任何第三方库。

先看最终效果，此处为静态图，实际加载动画表现为一个橙色渐变的圆形不停旋转，中间有白色遮罩形成内圈，视觉层次感丰富。

实现思路解析

通过组合两个半圆形的渐变背景块，模拟出转动的视觉效果，并使用@keyframes配合transform: rotate()实现无限旋转动画。中间添加一个白色遮罩，增强整体视觉层次感。

  • 双半圆渐变叠加
    将加载动画分成上下两个半圆形，每个半圆用线性渐变背景表现颜色的渐变和层次。上半部分渐变带有透明度变化，下半部分颜色更饱和，配合旋转产生动态效果。

  • 中心白色遮罩
    为了避免整体看起来太单调和厚重，在圆形中心添加一个白色半透明圆形遮罩，制造空心效果，提升美感。

  • 无限旋转动画
    通过CSS的@keyframes，对加载容器执行持续旋转变换，实现无间断的动画循环。

 

HTML结构

  • .loading-box 是动画的整体容器，负责圆形外观和旋转动画。
  • .loading-top 和 .loading-bottom 分别为上下两个半圆，承担渐变色表现。
  • .mark 作为中间的遮罩，形成内圈效果。
<div class="loading-box">
    <div class="mark"></div>
    <div class="loading-top"></div>
    <div class="loading-bottom"></div>
</div>

CSS样式

  • .loading-box设定宽高相等，圆角50%保证为圆形，overflow: hidden确保半圆形内容不会溢出容器边界。
  • 两个半圆的高度各占一半，上半部分颜色透明度稍低，配合渐变制造光影变化，下半部分颜色饱和，增加视觉冲击力。
  • .mark绝对定位居中，大小为容器的75%，形成一个白色内圈，视觉上产生空间感。
  • 通过@keyframes loading，实现了一个2秒周期线性无限旋转动画，顺时针旋转一圈。
.loading-box {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    animation: loading 2s linear infinite;
}

.loading-top {
    width: 100%;
    height: 50%;
    background: linear-gradient(to right, rgba(255, 77, 0, 0.5) 0%, rgba(255, 77, 0, 0.5) 10%, #ffffff 100%);
}

.loading-bottom {
    width: 100%;
    height: 50%;
    background: linear-gradient(to right, rgba(255, 77, 0, 0.5) 0%, rgba(255, 77, 0, 0.5) 10%, rgba(255, 77, 0) 100%);
}

.mark {
    width: 75%;
    height: 75%;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
}

@keyframes loading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .loading-box {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            overflow: hidden;
            position: relative;
            animation: loading 2s linear infinite;
        }

        .loading-top {
            width: 100%;
            height: 50%;
            background: linear-gradient(to right, rgba(255, 77, 0, 0.5) 0%, rgba(255, 77, 0, 0.5) 10%, #ffffff 100%);
        }

        .loading-bottom {
            width: 100%;
            height: 50%;
            background: linear-gradient(to right, rgba(255, 77, 0, 0.5) 0%, rgba(255, 77, 0, 0.5) 10%, rgba(255, 77, 0) 100%);
        }

        .mark {
            width: 75%;
            height: 75%;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #ffffff;
        }

        @keyframes loading {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(-360deg);
            }
        }
    </style>
</head>

<body>
    <div class="loading-box">
        <div class="mark"></div>
        <div class="loading-top"></div>
        <div class="loading-bottom"></div>
    </div>
</body>

</html>

# css # 前端
Logo
火山引擎 ADG 社区

火山引擎开发者社区是火山引擎打造的AI技术生态平台，聚焦Agent与大模型开发，提供豆包系列模型（图像/视频/视觉）、智能分析与会话工具，并配套评测集、动手实验室及行业案例库。社区通过技术沙龙、挑战赛等活动促进开发者成长，新用户可领50万Tokens权益，助力构建智能应用。

更多推荐

OpenClaw 本地部署完整指南（Windows + Ollama）

本文档基于实际部署经验编写，旨在帮助你在 Windows 系统上从零开始搭建 OpenClaw，并连接本地 Ollama 模型（如 Qwen2.5 或 Qwen3），使其具备完整的智能体能力。文档包含了所有关键步骤以及常见问题的解决方案。

avatar 火山引擎 ADG 社区

OpenClaw 小白安装指南（Windows版）

（类似一个能自动执行任务的AI机器人），不是游戏。API Key只保存在你本地电脑的加密文件里，不会上传到任何地方。访问：https://github.com/miaoxworld/openclaw-manager/releases。: 一键安装脚本会自动安装Node.js 22+，如果失败，手动下载安装：https://nodejs.org/：在PowerShell中，鼠标右键就是粘贴，不需要按

avatar 火山引擎 ADG 社区

飞书 × OpenClaw 接入指南：不用服务器，用长连接把机器人跑起来

这个项目存在的意义，就是把“飞书接 OpenClaw”这件事，整理成一套的配置入口，并把官方文档没覆盖到的坑集中写成排查清单。先说清楚它的角色：OpenClaw 现在已经内置官方飞书插件 @openclaw/feishu，功能更完整、维护也更及时。，说明飞书 + AI 的接入已经走通。另外，仓库也推荐了一个新项目：把 OpenClaw 变成“多 Agent 团队”，用多个 Agent 分工，Sla

avatar 火山引擎 ADG 社区