1

我正在制作一个 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>
4

1 回答 1

2

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 -掩蔽

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

于 2013-10-16T18:25:40.500 回答