纯CSS实现圆形旋转渐变加载动画

前端小菜袅

661人浏览 · 2025-05-10 00:42:35

前端小菜袅 · 2025-05-10 00:42:35 发布

最终效果

在日常项目开发中，我们经常需要用到加载动画来提升用户体验。今天分享一个纯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>

智能体开发者社区

中国智能体开发者社区，聚焦智能体与大模型开发，提供前沿资讯、实用工具链、开源项目及行业案例。通过技术沙龙、开发者大赛等活动，促进经验交流与协作，助力开发者快速构建创新智能应用。

更多推荐

从一张商品图到正式上架：实测店匠 Shoplazza Athena，AI Agent 不只是聊天框

智能体开发者社区

2026 AI Agent 落地观察：从演示到生产，智能体正在穿越规模化拐点

智能体开始批量走进生产环境。行业调研数据显示，超过半数使用 AI 的企业已将 Agent 部署至生产环境，2026 年被普遍认为是智能体应用的爆发元年——从单点实验走向系统协作，从模型能力竞争转向协议生态竞争。这篇文章梳理近期 Agent 落地的几个关键信号：编程智能体的工作台化、协议层的标准化、企业级 AgentOps 的成型，以及各行业的真实案例，最后聊聊落地里真实的坑。—## 一、格局之变：