如果这是在错误的社区,我道歉,我找不到更合适的。
随着UX设计的推出,创建可在各州之间平滑制作动画的交互式图标,我想知道在性能,兼容性和自定义方面是否有比基于SVG的图形更好的Web解决方案。
我有一个想法,使用样式化HTML元素和CSS过渡重新创建其中一些图标。通过定义图标的起点和终点,我们可以自定义它的许多属性,例如颜色,圆度,过渡缓和和延迟,以使用单个代码库创建非常自定义的动画。由于它使用纯CSS属性而不是JavaScript来计算帧,因此应该比SVG图形更有效地使用硬件。
查看我制作的示例,该示例提供了一个用户界面,用于更改每个部件的颜色,圆度,旋转和不透明度(用于调试)。它显示各种尺寸的图标。
http://jsfiddle.net/evankennedy/v118voks/9/
基本上,在悬停时,我们将属性应用于每个单独的栏:
.menu:hover .bar-1 {
width: 0.5em;
left: 0;
top: 0.125em;
transform: rotate(-45deg);
}
我从这种方法中看到了一些缺点。
IE8& Opera Mini ......甚至IE9也没有进行转换,但它至少有转换所以它将是一个非动画图标。 IE8可以用一些hacky过滤器修复,并确保使用宽度或相对定位而不是变换,但这会使代码膨胀一点。
HTML代码中会有额外的标记。我希望未来会出现一些解决方案(类似于Shadow DOM),这有助于缓解这一问题。有些图标可以纯粹用一个元素和伪元素制作,但我不想将所有图标限制为3个。
很难让所有图标看起来都很小。我不确定这与使用小尺寸的SVG图形相比如何,但我认为原生元素看起来会更糟,因为这不是它们的主要目的。我的示例中的图标看起来确实很好,但是在16px下。
这些缺点和我错过的任何其他缺点都超过了积极因素吗?