手把手教你实现彩色加载Loading

一条会coding的Shark
332 阅读4分钟

前言

不出意外，这次又是一个和彩色相关的效果。这次实现的是一个彩色Loading，十分简单，话不多说，我们直接进入实现环节。

效果预览

效果预览如下。

CSS 部分

CSS相关代码如下。

    body {
      margin: 0;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: black;
      overflow: hidden;
    }
    .loader {
      width: 10em;
      height: 10em;
      font-size: 30px;
      box-sizing: border-box;
      border-top: 0.3em solid hotpink;
      border-radius: 50%;
      position: relative;
      animation: rotating 2s linear infinite;
    }

body

  • margin: 0;：清除了页面的默认外边距。
  • height: 100vh;：使得 body 的高度占据整个视口高度，确保整个加载动画在屏幕中垂直居中。
  • display: flex;：将 body 设置为一个 Flex 容器，这样可以使用弹性布局。
  • align-items: center;：在 Flex 容器中，使其子项在交叉轴（垂直方向）上居中对齐。
  • justify-content: center;：在 Flex 容器中，使其子项在主轴（水平方向）上居中对齐。
  • background-color: black;：设置页面的背景颜色为黑色。
  • overflow: hidden;：隐藏任何溢出的内容，确保不会出现滚动条。

.loader

  • width: 10em; height: 10em;：定义了加载动画的宽度和高度。
  • font-size: 30px;：设置了加载动画内部文本的字体大小。
  • box-sizing: border-box;：设置盒模型为边框盒模型，确保边框的大小不会改变盒子的尺寸。
  • border-top: 0.3em solid hotpink;：定义了加载动画的顶部边框样式，创建了加载动画的旋转边框样式。
  • border-radius: 50%;：将加载动画的边框半径设置为50%，使其呈现为圆形。
  • position: relative;：将加载动画设置为相对定位，以便后代元素进行绝对定位。
  • animation: rotating 2s linear infinite;：定义了名为 rotating 的动画，以线性模式，在2秒内无限循环旋转加载动画。
  .loader::before,
    .loader::after {
      content: "";
      position: absolute;
      width: inherit;
      height: inherit;
      border-radius: 50%;
      box-sizing: border-box;
      top: -0.2em;
    }
    .loader::before {
      border-top: 0.3em solid dodgerblue;
      transform: rotate(120deg);
    }
    .loader::after {
      border-top: 0.3em solid gold;
      transform: rotate(240deg);
    }

.loader::before 和 .loader::after

  • content: "";：使伪元素内容为空，这样它们不会在文档流中占据空间，但是它们的样式影响布局构建。
  • position: absolute;：将伪元素设置为绝对定位，这样它们可以相对于.loader进行定位。
  • width: inherit; height: inherit;：设置伪元素的宽度和高度与.loader元素相同，保证大小一致。
  • border-radius: 50%;：将伪元素的边框半径设置为50%，使其呈现为圆形。
  • box-sizing: border-box;：设置盒模型为边框盒模型，确保边框的大小不会改变伪元素的尺寸。
  • top: -0.2em;：将伪元素向上移动一点，以使它们与.loader元素的顶部对齐。

.loader::before

  • border-top: 0.3em solid dodgerblue;：创建一个顶部边框，颜色为深蓝色，这是第一个旋转的边框。
  • transform: rotate(120deg);：对该伪元素应用rotate转换，使其沿Z轴顺时针旋转120度。

.loader::after

  • border-top: 0.3em solid gold;：创建另一个顶部边框，颜色为金黄色，这是第二个旋转的边框。
  • transform: rotate(240deg);：对该伪元素应用rotate转换，使其沿Z轴顺时针旋转240度。

这些样式的组合产生了适合加载动画的两个旋转边框，从而形成了整个加载动画的视觉效果。

这段CSS代码定义了.loader加载动画中使用的span元素的样式以及旋转动画rotating。

 .loader span {
      position: absolute;
      color: white;
      width: inherit;
      height: inherit;
      text-align: center;
      line-height: 10em;
      font-family: sans-serif;
      animation: rotating 2s ease-in-out infinite reverse;
    }
    @keyframes rotating {
      33% {
        transform: rotate(0.33turn);
      }
      66% {
        transform: rotate(0.66turn);
      }
      100% {
        transform: rotate(1turn);
      }
    }

.loader span

  • position: absolute;：将span元素设置为绝对定位，以便相对于其最近的非静态父元素进行定位。
  • color: white;：设置文本颜色为白色。
  • width: inherit; height: inherit;：设置span元素的宽度和高度等于.loader元素，保证大小一致。
  • text-align: center;：使文本内容居中对齐。
  • line-height: 10em;：设置行高为10em，确保文本垂直居中。
  • font-family: sans-serif;：应用了无衬线字体。
  • animation: rotating 2s ease-in-out infinite reverse;：定义了名为 rotating 的动画，该动画将在2秒内以"ease-in-out"的方式无限循环，并且在每次迭代中，动画方向相反。

@keyframes rotating

这部分定义了用于旋转动画的关键帧。

  • 33%：对应于旋转的1/3圈。
  • 66%：对应于旋转的2/3圈。
  • 100%：对应于完整的旋转1圈。

这样使得加载动画中的文本内容相对于其容器进行旋转动画，旋转角度分别为1/3、2/3和1圈。整个关键帧动画以ease-in-out的时间函数以及反向方向无限循环。

总结

以上就是整个效果的实现过程了，纯 CSS 实现，代码简单易懂。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~

avatar
文章
阅读
粉丝