我曾经在C ++上编写OpenGL2.1应用程序。现在我正在使用HTML5,因为我坚信它将成为单一UI平台。
我知道很多CSS3动画/规则都可以强制使用GPU。但是,它们都不允许“用户级”计算。
我知道它不是CSS的设计目标,但是如何在纯CSS上使用简单的数学制作动画呢?我不喜欢CPU唤醒的想法。
作为一个例子,简单的任务,由具有0个CPU动作的着色器轻松解决:
Timer on pure CSS
.
但它有一个问题:它永远不会停止。那么,我能应用简单的条件吗?就像动画停止时停止:'content'< ATTR(目标)
主要用于教育目的。
答案 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 Variables和CSS locks
但是如果你想让某些事情发生或停止,除了黑客攻击/欺骗CSS或过度复杂的代码之外,那么JavaScript和DOM事件就是可行的方法。
你说的是GPU,计算,OpenGL,以防万一:如果你需要计算密集的JS,那么试试ServiceWorkers。他们无法修改DOM,但他们会在后台运行一些数字。