css - CSS3 上的 GPU 渲染

Question

我曾经在 C++ 上编写 OpenGL2.1 应用程序。现在我在 HTML5 工作，因为我坚信它将成为单一的 UI 平台。

我知道很多 CSS3 动画/规则可以强制到 GPU。但是，它们都不允许“用户级”计算。

我知道这不是 CSS 的设计目的，但我如何在纯 CSS 上用简单的数学制作动画？我不喜欢 CPU 唤醒的想法。

举个例子，一个简单的任务，很容易被着色器用 0 个 CPU Action 解决: Timer on pure CSS.

但它有一个问题:它永远不会停止。那么，我可以应用简单的条件吗？喜欢在动画停止时停止:'content' < attr(target)

主要用于教育目的。

Answer 1

一些想法:

animation-iteration-count (MDN) 是我能想到的最简单的条件。

---

你也可以使用 CSS Custom Properties (又名“CSS 变量”)和一些 JS:

:root {
  --count: 19;
}
.selector {
  animation-iteration-count: var(--count);
}

现在在 JS 中你只需要修改一个值，这个新值会立即用于许多声明。

---

使用 JS，您可以在 HTML 元素上切换类，CSS 规则是否匹配取决于它们的选择器规则。

---

演示:

• Update CSS Variables with JS
• Parallax 3D Button with JS controlled CSS variables

您还可以看到 "Conditions" for CSS Variables和 CSS locks

但如果你想让某事发生或停止，除了滥用 CSS 或使用过于复杂的代码的黑客/技巧之外，那么 JavaScript 和 DOM 事件是可行的方法。
你说的是 GPU、计算、OpenGL，以防万一:如果你需要计算密集型 JS，那么试试 ServiceWorkers。他们无法修改 DOM，但会在后台运行以处理一些数字。