需要修复 CSS3 加载器周围的模糊像素

Question

我正在制作一个 css3 加载器动画，但无法使其非常清晰。因为我基本上使用两个圆圈，所以由于两个重叠的圆圈，边缘略有凸起。

关于如何解决这个问题的任何想法？

http://codepen.io/anon/pen/qdylp

<div class="loader loader-2"></div>
<style type="text/css">
body {
  max-width: 1000px;
  margin: 100px auto 0;
  padding-left: 6.25%;
}
.loader {
  position: relative;
  display: inline-block;
  margin: 0 12.5% 100px;
  width: 58px;
  height: 58px;
  border: 2px solid #0cf;
  border-radius:50%;
  box-sizing: border-box;
  animation: spin 4.5s infinite linear;
}
.loader::before,
.loader::after {
  left: -2px;
  top: -2px;
  display: none;
  position: absolute;
  content: '';
  width: inherit;
  height: inherit;
  border: inherit;
  border-radius: inherit;
  box-sizing: border-box;
}

/*
 * LOADER 2
 */
.loader-2 {
  border-top-color: transparent;
  background-clip: content-box;
  background-clip: border-box;
}
.loader-2::after {
  display: block;
  left: -2px;
  top: -2px;
  border: inherit;
  transform: rotate(300deg);
  background-clip: content-box;
  background-clip: border-box;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
}
.stopped {
  animation: spin 1004.5s infinite linear;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
}
</style>

Answer 1

transform s通常会由于浏览器操作元素的方式而使对象的外观变得模糊。它在Chrome中看起来还不错，但是所有浏览器的渲染方式都会有所不同。

一种可能帮助模糊的方法是放大、旋转，然后缩小，如下所示：

transform: scale(4) rotate(0deg) scale(0.25);

查看调整后的演示，看看这是否更清晰：http://codepen.io/shshaw/pen/yiHts

编辑：如果背景颜色已知，那么您可以让伪元素覆盖圆圈的一部分，这将呈现得更好一点：http://codepen.io/shshaw/pen/pzFtG

使用 SVG，您可以屏蔽，但浏览器支持不是很好： http://caniuse.com/#search=mask 下面是一个演练，看看这是否是你需要的： http://thenittygritty.co/css-masking

根据我们的谈话，最好的选择可能是在伪元素上使用clip，并在一个元素上稍微旋转一下：http://codepen.io/shshaw/pen/JeBHk