如何使用 HTML 和 CSS 创建动画加载器环

当我们需要为项目添加一些动画效果时，加载器环是一个非常不错的选择。本文将介绍如何使用 HTML 和 CSS 来创建动画加载器环。

HTML

首先，我们需要创建一个 HTML 元素来包含加载器环。在此示例中，我们将使用 div 元素。

<div class="loader"></div>

CSS

接下来，我们将使用 CSS 来创建加载器环的动画效果。我们将使用 :after 选择器来创建我们想要的形状。

.loader {
  width: 14px;
  height: 14px;
  position: relative;
  margin: 0 auto;
  border-radius: 50%;
  border-top: 2px solid #FF5A5F;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-left: 2px solid transparent;
  animation: loader 0.8s linear infinite;
}

.loader:after {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  border-top: inherit;
  border-right: inherit;
  border-bottom: inherit;
  border-left: inherit;
  animation: loader 1.6s linear infinite;
  animation-delay: 0.8s;
}

@keyframes loader {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

这些 CSS 属性将创建一个带有外边界、半径和动画的圆。我们使用 :after 选择器创建一个内边界、宽度和高度与外边界相同的圆。接下来，我们使用 animation 属性为两个圆添加旋转动画。

结论

现在，我们已经创建了一个简单的动画加载器环。可以通过以下链接查看效果：

Demo

我们可以在 loader 类中使用其他 CSS 属性来调整加载器的颜色、大小和位置。同时，我们也可以根据需要创建自己的动画效果。