伪造的三维卡体验，再度回顾 CSS 动画！

前端

2022-11-09 02:46:40

使用 CSS 动画实现 3D 卡片列表效果

什么是 CSS 动画？

CSS 动画允许你为网页元素添加动效，创建各种效果，从简单的淡入淡出到更复杂的动画，如旋转、缩放和移动。在本文中，我们将利用 CSS 动画来创建一个伪造的 3D 卡片列表。

CSS 动画的基础

CSS 动画包含两部分：动画属性和关键帧。

动画属性： 定义效果，包括持续时间、延迟和迭代次数。
关键帧： 特定时刻动画的行为。你可以使用它们来控制动画在不同时间的表现。

创建和设置样式

使用 HTML 创建一个包含卡片的 div：

<div class="card"></div>

用 CSS 设置卡片样式：

.card {
  width: 200px;
  height: 300px;
  background-color: #fff;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
}

创建伪 3D 卡片列表

使用 CSS 动画创建伪 3D 卡片列表：

关键帧：

@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

动画属性：

.card {
  animation: rotate 5s infinite linear;
}

这会使卡片在 5 秒内旋转 360 度，并无限循环。

代码示例：

将以下代码添加到你的 HTML 文件中：

<div class="card"></div>

<style>
.card {
  width: 200px;
  height: 300px;
  background-color: #fff;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  animation: rotate 5s infinite linear;
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
</style>

常见问题解答：

我可以更改动画速度吗？
- 是的，你可以通过调整 animation-duration 属性来更改动画速度。
如何让卡片在多个轴上旋转？
- 你可以将 transform 属性用于 rotateX 和 rotateZ 来在多个轴上旋转卡片。
我可以让卡片旋转的方向相反吗？
- 是的，你可以通过将 rotateY(360deg) 更改为 rotateY(-360deg) 来使卡片向相反的方向旋转。
如何让卡片旋转得更平滑？
- 尝试使用 animation-timing-function 属性，并探索不同的选项，如 ease-in 或 ease-out。
可以在旋转的同时添加其他动画吗？
- 是的，你可以通过添加更多关键帧来同时创建多个动画，例如同时旋转和缩放。