变幻多姿的loading动效：css变量打造心形加载条

2024-01-13 12:04:38

前言
上一章，我们用css变量成功实现了一个条形加载条，展示了css变量能简化代码量，让代码更易维护。今天，我们再接再厉，用css变量来实现一个更有趣的东西——心形加载条。

使用CSS变量打造心形加载条

在创建心形加载条之前，我们需要先了解它的基本原理。简而言之，我们利用CSS变量来控制心形的形状、颜色和其他属性，并通过CSS动画来实现心形跳动效果。

创建基本的HTML结构
首先，我们创建一个简单的HTML结构，包括一个div元素，这个元素将用作我们的心形加载条。

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

定义CSS变量
接下来，我们定义一系列CSS变量，这些变量将用于控制心形加载条的外观和动画效果。

:root {
  --heart-width: 100px;
  --heart-height: 100px;
  --heart-color: #ff0000;
  --heart-animation-duration: 1s;
  --heart-animation-delay: 0s;
}

创建心形形状
现在，我们使用CSS的conic-gradient()函数来创建心形形状。这个函数允许我们通过定义角度范围和颜色来创建复杂的渐变效果。

.heart-loading {
  width: var(--heart-width);
  height: var(--heart-height);
  background: conic-gradient(
    at center,
    #ff0000 0deg 50%,
    transparent 50% 100%
  );
}

添加CSS动画
为了让心形加载条动起来，我们使用CSS的animation属性，通过定义动画持续时间、延迟时间和其他属性来实现心形跳动效果。

.heart-loading {
  animation: heart-beat var(--heart-animation-duration) infinite alternate var(--heart-animation-delay);
}

@keyframes heart-beat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}