Question

我正在尝试实现一个涉及单个Unicode字符的基于CSS的动画：

HTML

<div class="spinner">⊗</div>

CSS

.spinner {
    display: inline-block;
    font-size: 42pt;
    margin: 50px;
    animation: spin 0.5s infinite linear;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

^{*我在此示例中省略了特定于供应商的前缀。}

但是，当我在浏览器中查看该页面时（Firefox 20.0），该字符略微偏离中心，导致“＃34;摇摆不定”。动画。

你可以在这里看到它：http://jsfiddle.net/bBaVN/77/

如何让角色完全居中？

Answer 1

使用SVG的概念证明

请考虑以下事项：

<div class="wrap">
  <span class="spinner">
      <svg {...many other attributes...} class="logo">
         ...path code...
      </svg>
  </span>
</wrap>

请参阅小提琴：http://jsfiddle.net/audetwebdesign/3G3U7/

我找到了符号的SVG版本：

http://www.fileformat.info/info/unicode/char/2297/index.htm

我必须使用SVG，在Adobe Illustrator中打开它，然后使用object->artboards->fit to artwork bounds重置视图端口（边界框？）。

然后我保存为SVG，然后将<svg>块剪切粘贴到演示中，最后，我将class="logo"属性添加到<svg>标记。

对于样式，我使用了以下CSS：

.spinner {
    display: block;
    width: 50px;
    height: 50px;
    position: relative;
    top: 75px;
    left: 75px;
    animation: spin 1s infinite linear;
}
.logo {
    display: block;
    width: 50px;
    height: 50px;
}

我将block和.logo的显示类型设置为.spinner，两者的高度和宽度都相同（使用方框以获得最佳效果。

似乎工作。最难的部分是学习如何设置SVG内嵌图像。我发现以下参考资料很有用：http://css-tricks.com/using-svg/

Answer 2

您可以在line-height上将45px设置为.spinner，这样可以确保包含span元素的宽度与其一样高。这是一个jsFiddle。现在有一点运动，但它看起来仍然不会移动。

让它围绕角色中心而不是围绕包含span的中心旋转的另一种方法是使用-vendorspecificprefix-transform-origin。您可以将其设置为围绕另一个点旋转，例如将其设置为：23px 34px会设置要旋转的点的x和y坐标。

我认为它仍然看起来像是移动了一点可能是因为角色没有被渲染为完美的圆形，你可以尝试用不同的字体渲染它，改变字体的磅值，或者即使打开或关闭text-rendering: optimizelegibility;也可能会有所不同。

-vendorspecificprefix-transform-origin的默认值为50% 50%，这表明如果确保元素内的字符完全居中，并且在包含元素上设置动画，则应该完全旋转围绕中心，然后玩-vendorspecificprefix-transform-origin只会让事情变得更糟。

我想到的另一个想法是，通过将文字的磅值设置为42pt，包含范围的宽度变为45px，现在50%的宽度为{{} 1}}，如果您将文本的磅值设置得更大，或者只是将包含范围的宽度和高度设置为22.5px，那么它可能会有效，那么46px将是{{} 1}}，这可能与当前运动有所不同。

<强>更新

我能够通过使用单空格字体50%在Chrome（and in FireFox）中完美居中，手动设置23px，{{ 1 {}}和Courier line-height使角色居中，然后通过height使用width移动角色，迫使角色看起来更像圆圈。< / p>

span

我认为我需要2个jsFiddle来为不同的浏览器演示如何回答关于你是否应该这样做的问题，我认为浏览器之间字体渲染的差异将确保你做不到这可靠而无需浏览器检测。

如何在其父元素中完全居中Unicode数学符号？

2 个答案: