Div与动画之间的怪异线条

Question

我正在制作一个CSS饼，它可以翻转1/4的馅饼，并在它悬停时改变颜色。但是，在过渡期间，饼图之间出现了奇怪的线条。起初，即使没有动画，这些线也会出现。但是，我用.container解决了这个问题。任何帮助表示赞赏。这是我的代码：

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;
}

Answer 1

使每个扇区1px大于集装箱的一半将使它们略微重叠，你将摆脱人工制品。
如果您认为悬停状态下的剩余距离太小，请将transition值增加1px：

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;