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

发布于：2025-03-17 ⋅ 阅读:(16) ⋅ 点赞:(0)

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

在这里插入图片描述

第 0 步：项目结构

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

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

第 1 步：HTML 骨架

以下是 index.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 的核心内容，并逐步拆解每个样式如何作用。

/* 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 步：构建圆形“环”元素

.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”文字

.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：

@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. 如何改变环的颜色？
    • 在 .ring 的 box-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”动画！祝你学习愉快。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布