CSS3上的GPU渲染

时间:2016-12-15 13:14:26

标签: css3 gpu

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

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

我知道它不是CSS的设计目标,但是如何在纯CSS上使用简单的数学制作动画呢?我不喜欢CPU唤醒的想法。

作为一个例子,简单的任务,由具有0个CPU动作的着色器轻松解决:     Timer on pure CSS .

但它有一个问题:它永远不会停止。那么,我能应用简单的条件吗?就像动画停止时停止:'content'< ATTR(目标)

主要用于教育目的。

1 个答案:

答案 0 :(得分:2)

一些想法:

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

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

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

现在在JS中你只需要修改一个值,并且在新的声明中立即使用新值。

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

<强>演示:

您还可以看到"Conditions" for CSS VariablesCSS locks

但是如果你想让某些事情发生或停止,除了黑客攻击/欺骗CSS或过度复杂的代码之外,那么JavaScript和DOM事件就是可行的方法。
你说的是GPU,计算,OpenGL,以防万一:如果你需要计算密集的JS,那么试试ServiceWorkers。他们无法修改DOM,但他们会在后台运行一些数字。