咖薇琪前端 2023-11-03

炫酷的CSS Loading加载动画

AI 概述

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

文章目录隐藏

HTML 代码
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秒内线性地进行，无限循环播放。动画的每个关键帧设置了不同的变换效果，包括 平移、缩放和透明度 变化。根据时间的进展，加载器的形状和位置会发生变化，从而创造出动态的效果。

结语

通过本篇文章的详细介绍，相信能够帮助你更好地使用CSS来创建一个loading加载中动画，从而理解掌握和应用这个效果。你可以根据自己的需求调整大小、颜色和持续时间等参数，创建符合你网页风格的加载中动画。加载中动画不仅能够提供视觉上的反馈，告诉用户系统正在工作中，还能够改善用户体验，减少长时间等待的焦虑感。

以上关于炫酷的CSS Loading加载动画的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 1 赏

给作者打赏，鼓励TA抓紧创作！

微信

支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 炫酷的CSS Loading加载动画

咖薇琪普通

分享到：

HTML 代码

CSS 代码

结语

咖薇琪 普通

相关推荐

发表回复 取消回复

咖薇琪普通

发表回复取消回复