【开源宝藏】30天学会CSS - DAY2 第二课 Loader Ring Demo

下面给出一个逐步拆解 的中文教程,带你理解并复刻这个环形加载动画(Loader Ring)的实现过程。示例项目包含两个文件:index.htmlstyle.css。当页面加载时,会在屏幕中央显示"LOADING"文字以及一个不断旋转的圆环动画,非常适合作为加载指示器。


第 0 步:项目结构

复制代码
my-loader/
   ├─ index.html
   └─ style.css
  1. index.html
    • 存放 HTML 结构,包括环形容器和文字"LOADING"。
  2. style.css
    • 存放 CSS 样式,控制圆形环、文字居中、动画关键帧等。

在后续步骤中,每个修改点都会说明写在哪个文件里。


第 1 步:HTML 骨架

以下是 index.html 的最基本结构:

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="loader ring">
    <meta name="keywords" content="loader ring, css">
    <meta name="author" content="Milena Carecho">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 这里关联外部CSS文件 -->
    <link rel="stylesheet" href="style.css">

    <title>Loader Ring Demo</title>
</head>
<body>

    <div class="center">
        <!-- 用于展示"LOADING"文字 -->
        <div class="text">LOADING</div>

        <!-- 用于旋转动画的环 -->
        <div class="ring"></div>
    </div>
    
</body>
</html>

结构说明

  1. <div class="center">
    • 作为一个总体容器,用于在页面正中位置摆放内容。
  2. <div class="text">
    • 内部写了"LOADING"文本,与旋转环叠加在一起。
  3. <div class="ring">
    • 这是一个圆形元素,通过 CSS 给它添加旋转动画,从而实现"环绕旋转"的效果。

第 2 步:基础CSS与居中定位

下面将展示 style.css 的核心内容,并逐步拆解每个样式如何作用。

css 复制代码
/* style.css */

/* 全局通用设置 */
body {
    margin: 0;
    padding: 0;
    font-family: Verdana, sans-serif; /* 字体家族 */
}

/* 让 .center 容器相对浏览器可视区域做绝对定位,然后 translate 居中 */
.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

解释

  1. body :去掉默认的外边距 (margin) 和内边距 (padding),设定全局字体。
  2. .center :使用 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);,可以轻松把该容器移动到屏幕中央

第 3 步:构建圆形"环"元素

css 复制代码
.ring {
    width: 300px;
    height: 300px;
    border-radius: 50%;            /* 让方块变成圆形 */
    box-shadow: 0 4px 0 #262626;   /* 阴影模拟环形效果 */
    background: transparent;       /* 环本身是透明的 */
    animation: animate 1s linear infinite; /* 无限旋转动画 */
}

关键点

  1. width/height 相同border-radius: 50%
    • 把一个 300×300 的正方形变成正圆形。
  2. box-shadow: 0 4px 0 #262626;
    • 这会在圆形边缘投下一条阴影,看起来好像是一条较粗的环边,尤其在旋转时会产生"环绕"视觉。
    • 你也可以改成 box-shadow: 0 4px #262626 inset; 或使用更多阴影属性来调节效果。
  3. animation: animate 1s linear infinite;
    • 调用名为 animate 的关键帧动画,每1秒旋转一圈 (rotate(360deg)),线性过渡并无限循环。

第 4 步:设置"LOADING"文字

css 复制代码
.text {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    color: #262626;        /* 文字颜色 */
    position: absolute;    /* 叠加在同一个圆心 */
    top: 0;
    left: 0;
    text-align: center;    /* 文字居中(横向) */
    line-height: 300px;    /* 文字居中(纵向) */
    font-size: 2em;        /* 字号 */
    background: transparent;
    box-shadow: 0 0 5px rgba(0,0,0,.2);
}

关键点

  1. 大小与位置
    • width: 300px; height: 300px;.ring 相同,绝对定位到同一个 (top: 0; left: 0),从而精确地覆盖在环上
  2. 文字居中
    • text-align: center; line-height: 300px; 可以让"LOADING"这几个字在圆形中居于正中央,无需额外的 flex 布局。
  3. 视觉效果
    • border-radius: 50% 保持了圆形轮廓,但这里设置为透明背景,仅让文字和一点阴影可见。
    • box-shadow: 0 0 5px rgba(0,0,0,.2) 给文字所在的区域稍微增加一点柔和的阴影。

第 5 步:关键帧动画的定义

style.css 的下方,可以看到 @keyframes animate

css 复制代码
@keyframes animate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

解释

  • 我们定义了一个名为 animate 的动画:
    • 在动画开始(0%)时,元素不旋转 (rotate(0deg));
    • 在动画结束(100%)时,元素旋转 360°。
  • 因为 .ring 引用了 animation: animate 1s linear infinite;,所以这个动画会每 1 秒旋转一整圈,反复无限次执行。

若想加快或减慢旋转速度,可以调整 1s 为更小或更大数值;如果想让旋转有加速或减速,可以把 linear 替换为 ease-in-out 等。


第 6 步:整体运作

  1. 页面加载
    • 浏览器解析 index.html,在 <body> 中找到 .center 容器,并把它居中。
  2. 环与文字
    • .text 文字固定不动,静静地呆在圆心。
    • .ring 元素利用关键帧动画不断执行 rotate(360deg)。由于它有阴影(box-shadow),在旋转时会呈现"环绕"视觉效果。
  3. 无限循环
    • 通过 animation: animate 1s linear infinite;,该环会不停地旋转,直到页面被关闭或跳转。

第 7 步:常见问题与可选扩展

  1. 如何改变环的颜色?
    • .ringbox-shadow: 0 4px 0 #262626; 里,把 #262626 换成其他颜色即可。
    • 你也可以给 .ring 一个略带半透明的背景,以达到其他视觉效果。
  2. 想让文字也旋转吗?
    • 只要给 .text 同样设置 animation: animate 1s linear infinite; 即可,不过通常加载指示器的文字会静止显示,故这里选择让文字不旋转。
  3. 加载文本换成图片Logo?
    • 可以把 <div class="text">LOADING</div> 换成 <img src="logo.png" class="text">,同时注意 width/height 等,或使用 background-image。
  4. 缓动效果
    • 如果想让环转动时有渐慢再加速 的效果,可以把 animation-timing-function 改为 ease-in-out,或在 @keyframes 中设置更多细分点(如 50% { transform: rotate(180deg) } 等)。
  5. 自适应屏幕
    • 如果想让环形大小随屏幕变化,可把固定的 300px 改为百分比或相对单位,比如 width: 20vmin; height: 20vmin;,让它在小屏上自动缩小,在大屏上放大。

总结

通过这份拆解式教程,你可以了解本示例的整体思路与各部分功能:

  1. HTML 结构 :由一个父容器 .center,内部包含旋转环 .ring 与文字 .text
  2. CSS 样式
    • 绝对定位 + translate(-50%, -50%) 实现元素在页面中心。
    • 圆形 + 阴影 + 关键帧动画,实现旋转的环形效果。
    • 层叠两个 300×300 的圆(一个做环旋转,一个做文字展示)。
  3. 动画原理 : 通过 @keyframes + animation 属性,让 .ring 不断地做 0° → 360° 的循环旋转。

你可以在此基础上继续完善或扩展,比如换文本、调配颜色、改动旋转速度,甚至加上更多环等等。这样,就能轻松制作一个别致又简洁的"LOADING"动画!祝你学习愉快。

相关推荐
ObjectX前端实验室10 分钟前
【react18原理探究实践】异步可中断 & 时间分片
前端·react.js
SoaringHeart13 分钟前
Flutter进阶:自定义一个 json 转 model 工具
前端·flutter·dart
努力打怪升级14 分钟前
Rocky Linux 8 远程管理配置指南(宿主机 VNC + KVM 虚拟机 VNC)
前端·chrome
brzhang43 分钟前
AI Agent 干不好活,不是它笨,告诉你一个残忍的现实,是你给他的工具太难用了
前端·后端·架构
brzhang1 小时前
一文说明白为什么现在 AI Agent 都把重点放在上下文工程(context engineering)上?
前端·后端·架构
reembarkation1 小时前
自定义分页控件,只显示当前页码的前后N页
开发语言·前端·javascript
gerrgwg1 小时前
React Hooks入门
前端·javascript·react.js
ObjectX前端实验室2 小时前
【react18原理探究实践】调度机制之注册任务
前端·react.js
汉字萌萌哒2 小时前
【 HTML基础知识】
前端·javascript·windows
ObjectX前端实验室2 小时前
【React 原理探究实践】root.render 干了啥?——深入 render 函数
前端·react.js