以动绘粽香，共享甜蜜佳节：端午节专属的CSS创意加载特效

2023-12-03 05:36:42

在中华民族的传统节日中，端午节是一个充满诗情画意的节日。它不仅是中国人的文化遗产，更是一种重要的精神纽带。端午节期间，人们会吃粽子、划龙舟、挂艾草等，以纪念伟大的爱国诗人屈原。

今年端午节，我们不妨用CSS创意加载特效来点缀节日氛围，感受中华传统文化的魅力。下面，我们就一起来学习如何制作一个粽子加载动画。

CSS实现步骤

首先，我们需要准备三个图片素材：粽叶、糯米和红枣。然后，我们将这些素材导入到我们的项目中。

<div class="loading">
  <img src="粽叶.png" alt="粽叶">
  <img src="糯米.png" alt="糯米">
  <img src="红枣.png" alt="红枣">
</div>

接下来，我们需要为这些图片添加CSS样式。

.loading {
  width: 200px;
  height: 200px;
  position: relative;
}

.loading img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loading img:nth-child(1) {
  animation: leaf 2s infinite alternate;
}

.loading img:nth-child(2) {
  animation: rice 2s infinite alternate;
}

.loading img:nth-child(3) {
  animation: jujube 2s infinite alternate;
}

@keyframes leaf {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  50% {
    transform: translate(-50%, -50%) rotate(360deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

@keyframes rice {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  50% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

@keyframes jujube {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  50% {
    transform: translate(-50%, -50%) rotate(180deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

在上面的CSS代码中，我们首先设置了加载动画的容器，然后为每个图片添加了绝对定位，并使其居中。接着，我们为每个图片添加了动画样式，使其绕圆旋转。

最后，我们需要在HTML中添加一个按钮，用于触发加载动画。

<button type="button" onclick="startLoading()">开始加载</button>

<script>
function startLoading() {
  document.querySelector('.loading').classList.add('active');
}
</script>