4

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

HTML

<div class="spinner">⊗&lt;/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) 中查看页面时，角色会稍微偏离中心，从而导致“摇摆不定”的动画。

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

我怎样才能完全集中角色？

4

2 回答 2

4

Proof of Concept using SVG

Consider the following:

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

See the fiddle: http://jsfiddle.net/audetwebdesign/3G3U7/

I found a SVG version of the symbol at:

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

I had to take the SVG, open it in Adobe Illustrator and then reset the view port (bounding box?) using object->artboards->fit to artwork bounds.

I then saved as SVG and then cut-paste the <svg> block into the demo, and finally, I added the class="logo" attribute to the <svg> tag.

For styling, I used the following 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;
}

I set the display type to block for both .logo and .spinner, and both have the same height and width (use a square box for best results.

Seems to work. The hardest part was learning how to set up the SVG inline image. I found the following reference useful: http://css-tricks.com/using-svg/

于 2013-04-30T01:31:29.130 回答
1

您可以将其设置line-height为45pxon .spinner，这将确保包含span元素与宽度一样高。这是一个jsFiddle。现在运动少了一点，但它看起来仍然不像是完全不动。

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

我认为它看起来仍然有点移动的事实可能是由于字符没有被渲染为一个完美的圆圈，你可以尝试用不同的字体渲染它，改变字体的点大小，甚至text-rendering: optimizelegibility;打开或关闭可能会在那里有所作为。

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

我的另一个想法是，通过将文本的磅值设置为，42pt包含跨度的宽度变为将包含跨度的宽度和高度设置为，然后将是，这可能与当前移动有所不同。45px50%22.5px46px50%23px

更新：

通过使用 mono-space font ，手动设置,和以 使字符居中，然后通过移动使字符看起来更像一个圆圈，我能够使其在Chrome（和 FireFox ）中完美居中使用. _Courierline-heightheightwidthspan0.5px-webkit-transform: translate()

.spinner {
    display: inline-block;
    font-size: 42pt;
    line-height: 50px;  
    height: 46px;
    width: 46px;
    margin: 50px;
    -webkit-animation: spin 1s infinite linear;
    -moz-animation: spin 1s infinite linear;
    -ms-animation: spin 1s infinite linear;
    -o-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
    font-family: courier;
 }

@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg) translate(0.5px, 0px)}
    to { -webkit-transform: rotate(360deg) translate(0.5px, 0px)}
}

我认为我需要 2 个 jsFiddle 来为不同的浏览器演示这一事实回答了你是否应该这样做的问题，我认为浏览器之间字体渲染的差异将确保你无法做到这一点浏览器检测。

于 2013-04-30T01:25:37.900 回答