需要修复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常常会使对象的外观变得模糊。Chrome看起来不错，但所有的浏览器都会有一点不同。

一种潜在的帮助模糊的方法是放大，旋转，然后像这样缩小：

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

查看调整后的演示程序，看看是否有任何问题：http://codepen.io/shshaw/pen/yiHts

编辑:如果背景颜色是已知的，那么您可以只使用psuedo元素覆盖圆的一部分，这样就会呈现得更好一些：http://codepen.io/shshaw/pen/pzFtG。

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

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