在 CSS 中让元素在视窗内弹跳

假设您要让一个元素在屏幕上弹跳，类似于 老式屏幕保护程序 或 乓 之类的东西。

您可能需要跟踪元素的 X 位置，在时间循环中增加或减少它，并且当元素到达最大值或最小值时，它会反转方向。然后对 Y 位置执行相同的操作，您就获得了我们想要的效果。使用一些 JavaScript 和数学就可以轻松实现。

以下是 The Coding Train 对其清晰的解释

这是一个画布实现。它是 Pong，因此它考虑了球拍，稍微复杂一些，但基本数学原理仍然存在

查看 CodePen 上的
Pong，作者是 Joseph Gutierrez (@DerBaumeister)
在 CodePen 上。

但是，如果我们想纯粹在 CSS 中实现呢？我们可以编写 @keyframes 来移动 transform 或 left/top 属性……但是我们应该使用什么值呢？如果我们要在整个屏幕（视窗）内弹跳，我们需要知道屏幕的尺寸，然后使用这些值。但是，在 CSS 中我们永远无法知道确切的尺寸。

真的吗？

CSS 有 视窗单位，它们基于整个视窗的尺寸。此外，我们还有 calc()，我们可能知道我们自己的元素的大小。

这就是 Scott Kellum 的演示 的巧妙之处

查看 CodePen 上的
Codepen 屏幕保护程序，作者是 Scott Kellum (@scottkellum)
在 CodePen 上。

比较棘手的是将 X 动画和 Y 动画拆分成两个独立的动画（一个在父级上，另一个在子级上），这样当方向反转时，它可以独立发生，并且看起来更像屏幕保护程序。

<div class="el-wrap x">
  <div class="el y"></div>
</div>

:root {
  --width: 300px;
  --x-speed: 13s;
  --y-speed: 7s;
  --transition-speed: 2.2s;
}

.el { 
  width: var(--width);
  height: var(--width);
}

.x {
  animation: x var(--x-speed) linear infinite alternate;
}
.y {
  animation: y var(--y-speed) linear infinite alternate;
}

@keyframes x {
  100% {
    transform: translateX(calc(100vw - var(--width)));
  }
}
@keyframes y {
  100% {
    transform: translateY(calc(100vh - var(--width)));
  }
}

我借鉴了这个想法，并为这个小演示添加了一些圆润和一个额外的元素

查看 CodePen 上的
使用 `border-radius` 变形博客，作者是 Chris Coyier (@chriscoyier)
在 CodePen 上。