CSS 实现一个方块【动画演示】

2023-11-05 19:17:58

文章正文

CSS 实现方块动画

大家好，欢迎来到「CSS 实现方块动画」教程。在本文中，我们将带领大家使用 CSS 来实现一个简单的方块动画。CSS 动画技术可以为网页增添许多趣味性和交互性，而实现一个方块动画则是学习 CSS 动画的绝佳入门项目。

CSS 代码

首先，我们需要创建一个 HTML 文件来作为我们的容器。在这个 HTML 文件中，我们将添加一个 div 元素，并将 CSS 样式应用于该 div 元素。CSS 样式代码如下：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: square 2s infinite;
}

@keyframes square {
  0% {
    transform: translateX(0) translateY(0);
  }
  25% {
    transform: translateX(200px) translateY(0);
  }
  50% {
    transform: translateX(200px) translateY(200px);
  }
  75% {
    transform: translateX(0) translateY(200px);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}

CSS 样式详解

让我们来详细解释一下这段 CSS 代码。首先，我们在 div 元素上应用了 width 和 height 属性，分别设置了 div 元素的宽度和高度为 100px。接下来，我们设置了 div 元素的 background-color 属性为红色，以便能够看到方块。

然后，我们使用了 animation 属性，将方块动画命名为 "square"，并设置动画持续时间为 2 秒，以及重复次数为无限。

最后，我们在 @keyframes square 中定义了动画的关键帧。在 0% 的关键帧中，我们设置了方块的初始位置。在 25% 的关键帧中，我们让方块向右移动 200px。在 50% 的关键帧中，我们让方块向右移动 200px，并向下移动 200px。在 75% 的关键帧中，我们让方块向左移动 200px。在 100% 的关键帧中，我们让方块回到初始位置。