纯html + css

时间:2015-11-09 09:44:35

标签: html css

如果这是在错误的社区,我道歉,我找不到更合适的。

随着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);
}

我从这种方法中看到了一些缺点。

  1. IE8& Opera Mini ......甚至IE9也没有进行转换,但它至少有转换所以它将是一个非动画图标。 IE8可以用一些hacky过滤器修复,并确保使用宽度或相对定位而不是变换,但这会使代码膨胀一点。

  2. HTML代码中会有额外的标记。我希望未来会出现一些解决方案(类似于Shadow DOM),这有助于缓解这一问题。有些图标可以纯粹用一个元素和伪元素制作,但我不想将所有图标限制为3个。

  3. 很难让所有图标看起来都很小。我不确定这与使用小尺寸的SVG图形相比如何,但我认为原生元素看起来会更糟,因为这不是它们的主要目的。我的示例中的图标看起来确实很好,但是在16px下。

  4. 这些缺点和我错过的任何其他缺点都超过了积极因素吗?

0 个答案:

没有答案