纯CSS实现心形加载动画「附源码」

前言

在Web前端开发中，CSS是不可缺少的一部分。CSS不仅可以实现静态页面的排版布局，还可以实现动态效果。今天我们要讲的是如何利用纯CSS来实现一个心形加载动画。

实现思路

要实现一个心形加载动画，我们需要用到css动画和transform。具体实现步骤如下：

1.创建一个容器

我们首先需要创建一个容器来装载加载动画，CSS代码如下：

.heart-loading {
  width: 50px;
  height: 50px;
  position: relative;
}

以上代码表示创建了一个宽高均为50px的容器，定位方式为相对定位。

2.创建一个小圆圈

我们需要创建一个小圆圈作为我们的动画初始状态，圆圈的CSS代码如下：

.heart-loading:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #e02f5e;
  position: absolute;
  top: 0;
  left: 0;
}

以上代码表示在容器的上方放置一个圆圈，直径为20px，背景色为#e02f5e，定位方式为绝对定位，位置在容器的左上角。

3.创建一个心形形状

我们需要创建一个心形形状，作为动画的下一帧。需要设置形状，颜色和位置，CSS代码如下：

.heart-loading:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #e02f5e;
  top: -10px;
  left: 15px;
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
}

以上代码表示在容器的内部，放置一个20px的圆形，背景色与之前相同，定位到容器的左上方，实现旋转45度的效果来形成心形。

4.动画

现在我们需要将上述两个元素组合起来，形成一个动画效果。我们需要对小圆圈和心形形状使用keyframes来书写动画。CSS代码如下：

@keyframes heart {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
.heart-loading:before {
  animation: heart 1s ease infinite;
}
.heart-loading:after {
  animation: heart 1s ease infinite;
  animation-delay: 0.5s;
}

以上代码表示在容器中的:before和:after选择器上，应用heart动画，每次从开始到结束，时间为1s，缓动效果为ease，且无限循环。

最终实现的效果如下：

完整的实现代码如下：

.heart-loading {
  width: 50px;
  height: 50px;
  position: relative;
}
.heart-loading:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #e02f5e;
  position: absolute;
  top: 0;
  left: 0;
  animation: heart 1s ease infinite;
}
.heart-loading:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #e02f5e;
  top: -10px;
  left: 15px;
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
  animation: heart 1s ease infinite;
  animation-delay: 0.5s;
}
@keyframes heart {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

总结

本文通过示例代码演示了如何使用纯CSS实现一个心形加载动画。主要逻辑在于利用CSS动画和transform来控制元素的位置、形态和颜色，借此达到在小圆圈与心形之间切换，形成一个心形加载动画的效果。这只是CSS动效的基础演示，希望能够启发你更多的创意。