CSS 实现心形加载动画

在这篇博客中，我们将学习如何使用 CSS 来创建一个迷人的心形加载动画。你将看到如何利用 CSS 动画和旋转效果来实现这个动画效果。让我们开始吧！

准备工作

在开始之前，我们需要一个基本的 HTML 结构来容纳我们的加载动画。在 HTML 文件中，我们可以添加一个 div 元素来承载我们的动画。

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

创建 heart-loader 类

在 CSS 文件中，我们将使用 heart-loader 类来定义动画的样式。

.heart-loader {
  width: 100px;
  height: 100px;
  position: relative;
  margin: 0 auto;
}

上面的代码将设置加载动画容器的宽度为 100 像素，高度为 100 像素，并将其居中显示。

添加动画效果

下一步是为加载动画添加动画效果。我们将使用 CSS 关键帧动画来实现这个效果。

.heart-loader:before,
.heart-loader:after {
  content: '';
  position: absolute;
  top: 0;
  width: 50px;
  height: 80px;
  border-radius: 50px 50px 0 0;
  background: #ff3f40;
}

.heart-loader:before {
  left: 50px;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
  animation: heart-loader 1s linear infinite;
}

.heart-loader:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
  animation: heart-loader 1s linear infinite reverse;
}

@keyframes heart-loader {
  0% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(-315deg);
  }
}

上面的代码将分别创建两个半圆形元素。这两个元素将通过 before 和 after 伪元素在容器中展示。我们使用 animation 属性将 heart-loader 动画应用到这两个元素上，并设置无限循环，持续时间为 1 秒。

完成加载动画

最后一步是为加载动画添加一些样式，使其看起来更美观。

.heart-loader:before,
.heart-loader:after {
  box-shadow: -3px -3px 5px rgba(255, 255, 255, 0.4);
}

.heart-loader:before {
  z-index: 1;
}

.heart-loader:after {
  z-index: 2;
}

.heart-loader:before {
  animation-delay: 0.1s;
}

.heart-loader:after {
  animation-delay: 0.2s;
}

上述代码会对加载动画的半圆形元素添加阴影效果，并通过 z-index 属性设置它们的叠放顺序。我们还使用 animation-delay 属性为每个半圆形元素制定不同的延迟时间，从而实现动画效果的连续性。

总结

在本文中，我们学习了如何使用 CSS 创建一个心形加载动画。我们通过使用 CSS 关键帧动画结合旋转和伪元素来实现动画效果。通过添加一些样式效果，我们提高了动画的美观度。希望本文对你有所帮助，谢谢阅读！

本文来自极简博客，作者：冰山一角，转载请注明原文链接：CSS 实现心形加载动画