很酷的CSS Loading动画，让网页加载更有趣

爱摸鱼的程序员 07-26 51

前言：

如今朋友们对“css等待加载”大致比较着重，朋友们都想要学习一些“css等待加载”的相关内容。那么小编在网络上收集了一些对于“css等待加载””的相关文章，希望朋友们能喜欢，兄弟们一起来学习一下吧！

当用户正在浏览网站网页时，为了更好的用户体验，经常会使用加载中文字或者动画来表示正在加载数据或执行某项操作。而使用动画不仅能够吸引用户的注意力，同时也能够传达信息"系统正在工作中"，需要一些时间来完成任务。本文将详细介绍如何通过 CSS 创建一个加载中动画效果。

HTML 结构

首先是HTML代码，定义了一个类名container的<div>容器：

在这个容器里面包含了一些加载器.loader，每个加载器都具有不同的旋转角度自定义属性--r(1~4)，而每个加载器里面有20个<span>元素，并且也都具有不同的旋转角度自定义属性--r(1~20)。后面会通过CSS设置不同的旋转角度属性--r和旋转角度子属性--i，创建多个加载器，并且每个加载器都具有不同的动画表现。

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>CSS Animation</title>  <link rel="stylesheet" href="./index.css"></head><body>  <div class="container">    <div class="loader" style="--r: 1">      <span style="--i: 1"></span>      <span style="--i: 2"></span>      <span style="--i: 3"></span>      <span style="--i: 4"></span>      <span style="--i: 5"></span>      <span style="--i: 6"></span>      <span style="--i: 7"></span>      <span style="--i: 8"></span>      <span style="--i: 9"></span>      <span style="--i: 10"></span>      <span style="--i: 11"></span>      <span style="--i: 12"></span>      <span style="--i: 13"></span>      <span style="--i: 14"></span>      <span style="--i: 15"></span>      <span style="--i: 16"></span>      <span style="--i: 17"></span>      <span style="--i: 18"></span>      <span style="--i: 19"></span>      <span style="--i: 20"></span>    </div>    <div class="loader" style="--r: 2">      <span style="--i: 1"></span>      <span style="--i: 2"></span>      <span style="--i: 3"></span>      <span style="--i: 4"></span>      <span style="--i: 5"></span>      <span style="--i: 6"></span>      <span style="--i: 7"></span>      <span style="--i: 8"></span>      <span style="--i: 9"></span>      <span style="--i: 10"></span>      <span style="--i: 11"></span>      <span style="--i: 12"></span>      <span style="--i: 13"></span>      <span style="--i: 14"></span>      <span style="--i: 15"></span>      <span style="--i: 16"></span>      <span style="--i: 17"></span>      <span style="--i: 18"></span>      <span style="--i: 19"></span>      <span style="--i: 20"></span>    </div>    <div class="loader" style="--r: 3">      <span style="--i: 1"></span>      <span style="--i: 2"></span>      <span style="--i: 3"></span>      <span style="--i: 4"></span>      <span style="--i: 5"></span>      <span style="--i: 6"></span>      <span style="--i: 7"></span>      <span style="--i: 8"></span>      <span style="--i: 9"></span>      <span style="--i: 10"></span>      <span style="--i: 11"></span>      <span style="--i: 12"></span>      <span style="--i: 13"></span>      <span style="--i: 14"></span>      <span style="--i: 15"></span>      <span style="--i: 16"></span>      <span style="--i: 17"></span>      <span style="--i: 18"></span>      <span style="--i: 19"></span>      <span style="--i: 20"></span>    </div>    <div class="loader" style="--r: 4">      <span style="--i: 1"></span>      <span style="--i: 2"></span>      <span style="--i: 3"></span>      <span style="--i: 4"></span>      <span style="--i: 5"></span>      <span style="--i: 6"></span>      <span style="--i: 7"></span>      <span style="--i: 8"></span>      <span style="--i: 9"></span>      <span style="--i: 10"></span>      <span style="--i: 11"></span>      <span style="--i: 12"></span>      <span style="--i: 13"></span>      <span style="--i: 14"></span>      <span style="--i: 15"></span>      <span style="--i: 16"></span>      <span style="--i: 17"></span>      <span style="--i: 18"></span>      <span style="--i: 19"></span>      <span style="--i: 20"></span>    </div>  </div></body></html>

CSS 样式

接下来看CSS代码，重置全局样式后，给.container元素定义了水平垂直居中布局，然后使用filter样式属性来应用色相旋转(hue-rotate)滤镜，将背景色调整为90度的色相。因此，子元素的任何颜色同样会添加滤镜。

首先，每个.loader元素通过transform: rotate()属性根据--r值设置旋转角度 (45deg * 1/2/3/4 = 45/90/135/180deg)。其次，每个span元素使用定位设置初始位置在左侧，以及通过transform: rotate()属性根据--i值设置旋转角度 (18deg * 1~20 = 18 ~ 360deg)。然后，每个span::before定义固定的宽度和高度及背景颜色。使用box-shadow属性定义了一个由多个投影组成的阴影效果，产生一种立体感。

* {  margin: 0;  padding: 0;  box-sizing: border-box;}.container {  min-height: 100vh;  background-color: #042104;  filter: hue-rotate(90deg);  display: flex;  justify-content: center;  align-items: center;}.loader {  position: relative;  transform: rotate(calc(var(--r) * 45deg));}.loader span {  position: absolute;  top: 0;  left: -200px;  width: 200px;  height: 2px;  transform-origin: right;  transform: rotate(calc(var(--i) * 18deg));}.loader span::before {  content: "";  display: block;  width: 15px;  height: 15px;  background-color: #00ff0a;  border-radius: 15px;  box-shadow: 0 0 10px #00ff0a,               0 0 20px #00ff0a,               0 0 40px #00ff0a,               0 0 60px #00ff0a,               0 0 80px #00ff0a, 0 0 100px #00ff0a;  animation: animate 5s linear infinite;  animation-delay: calc(-0.5s * var(--i));}@keyframes animate {  0% {    transform: translateX(200px) scale(1);    opacity: 0;  }  10% {    opacity: 1;  }  80% {    opacity: 1;  }  100% {    transform: translateX(0) scale(0);    opacity: 1;  }}@media screen and (max-width: 576px) {  .container .loader {    scale: .6;  }  }

此外，通过animation属性和@keyframes规则，定义了名为animate的关键帧动画。该动画在5秒内线性地进行，无限循环播放。动画的每个关键帧设置了不同的变换效果，包括平移、缩放和透明度变化。根据时间的进展，加载器的形状和位置会发生变化，从而创造出动态的效果。