CSS3 上的 GPU 渲染

Question

CSS3 上的 GPU 渲染

cssgpu

4

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

我知道许多CSS3动画/规则可以强制使用GPU。但是，它们中没有一个允许“用户级”计算。

我知道这不是CSS设计的初衷，但我如何在纯CSS上进行简单数学运算的动画呢？我不喜欢CPU唤醒的想法。

例如，通过着色器轻松解决0个CPU操作的简单任务：纯CSS计时器 .

但它有一个问题：它永远不会停止。那么，我能否应用简单的条件？比如当animation-stop: 'content' < attr(target)时停止。

主要是为了教育目的。

- Offenso

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- FelipeAls · Accepted Answer

一些想法：

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

您还可以使用CSS自定义属性（又称“CSS变量”），并加上一些JS：

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

现在在JS中，您只需要修改单个值，新值就会立即用于许多声明中。

使用JS，您可以在HTML元素上切换类，并且CSS规则将根据其选择器规则匹配或不匹配。

演示:

您还可以查看CSS变量的“条件”和CSS锁定

但是，如果您想要发生或停止某些事件，而不是通过滥用CSS或使用过于复杂的代码，那么JavaScript和DOM事件就是正确的选择。
您正在谈论GPU、计算、OpenGL，因此提醒一下：如果您需要计算密集型的JS，则可以尝试使用ServiceWorkers。它们无法修改DOM，但可以在后台运行并进行一些计算。