动画之间的divs之间的怪异线条

Question

我正在制作一个CSS派，该pie转化了1/4的馅饼，并在悬停在盘中时会更改其颜色。但是，在过渡期间，馅饼碎片之间出现了奇怪的线条。最初，即使没有发生动画，这些线也出现了。但是，我用will-change: transform修复了这一点。任何帮助都将受到赞赏。这是我的代码：

body, html {
  text-align: center;
  height: 100%;
  overflow: hidden;
}
.container {
  margin: 0 auto;
  height: 180px;
  width: 180px;
  will-change: transform;
  position: relative;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
} 
.clear {
  clear: both;
}
.circle {
  position: absolute;
  width: 90px;
  height: 90px;
  background: #333;
  transition: 0.5s;
}
.circle:hover {
  background: #00AABB;
}
.circle-1:hover {
  transform: translate(-5px, -5px);
}
.circle-2:hover {
  transform: translate(5px, -5px);
}
.circle-3:hover {
  transform: translate(-5px, 5px);
}
.circle-4:hover {
  transform: translate(5px, 5px);
}
.circle-1 {
  -moz-border-radius: 90px 0 0 0;
  -webkit-border-radius: 90px 0 0 0;
  border-radius: 90px 0 0 0;
}
.circle-2 {
  left: 90px;
  -moz-border-radius: 90px 0 0 0;
  -webkit-border-radius: 90px 0 0 0;
  border-radius: 0 90px 0 0;
}
.circle-3 {
  top: 90px;
  -moz-border-radius: 90px 0 0 0;
  -webkit-border-radius: 90px 0 0 0;
  border-radius: 0 0 0 90px;
}
.circle-4 {
  top: 90px;
  left: 90px;
  -moz-border-radius: 90px 0 0 0;
  -webkit-border-radius: 90px 0 0 0;
  border-radius: 0 0 90px 0;
}

<main class="container">
  <div class="circle circle-1"></div>
  <div class="circle circle-2"></div>
  <div class="circle circle-3"></div>
  <div class="circle circle-4"></div>
</main>

Answer 1

使每个扇区1px大于一半的容器将使它们稍微重叠，并且您将摆脱人工制品。
如果您认为悬停状态的剩余距离太小，请通过1px增加transition值：

body, html {
  text-align: center;
  height: 100%;
  overflow: hidden;
}
.container {
  margin: 0 auto;
  height: 180px;
  width: 180px;
  will-change: transform;
  position: relative;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
} 
.clear {
  clear: both;
}
.circle {
  position: absolute;
  width: 91px;
  height: 91px;
  background: #333;
  transition: 0.5s;
}
.circle:hover {
  background: #00AABB;
}
.circle-1:hover {
  transform: translate(-6px, -6px);
}
.circle-2:hover {
  transform: translate(6px, -6px);
}
.circle-3:hover {
  transform: translate(-6px, 6px);
}
.circle-4:hover {
  transform: translate(6px, 6px);
}
.circle-1 {
  -moz-border-radius: 90px 0 0 0;
  -webkit-border-radius: 90px 0 0 0;
  border-radius: 90px 0 0 0;
}
.circle-2 {
  left: 90px;
  -moz-border-radius: 90px 0 0 0;
  -webkit-border-radius: 90px 0 0 0;
  border-radius: 0 90px 0 0;
}
.circle-3 {
  top: 90px;
  -moz-border-radius: 90px 0 0 0;
  -webkit-border-radius: 90px 0 0 0;
  border-radius: 0 0 0 90px;
}
.circle-4 {
  top: 90px;
  left: 90px;
  -moz-border-radius: 90px 0 0 0;
  -webkit-border-radius: 90px 0 0 0;
  border-radius: 0 0 90px 0;
}

<main class="container">
  <div class="circle circle-1"></div>
  <div class="circle circle-2"></div>
  <div class="circle circle-3"></div>
  <div class="circle circle-4"></div>
</main>