Question

我正在玩CSS动画，很有趣。我的经验有限，很麻烦。

下面的脚本将圆从三角形变换为正方形并反转。但是，圆形和三角形之间的动画有一个小错误。我希望它与边界有关，但我似乎无法解决。（我没有编程背景。：））

有人可以向我推正确的方向吗？

.triangle {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  animation-name: testframe;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes testframe {
/*circle*/
  0% {
    width: 100px;
    height: 100px;
    background-color: #6980fe;
    border-radius: 50%;
  }
/*trianle*/
  50% {
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-right-width: 50px;
    border-left-width: 50px;
    border-bottom: 100px solid #6980fe;
    background-color: transparent;
  }
/*square*/
  100% {
    width: 100px;
    height: 100px;
    background-color: #6980fe;
  }
}

Answer 1

要修复此小错误，您应该在三角形动画中包含此属性：

“ 边界半径：0； ”

像这样：

...

/*trianle*/
50% {
   width: 0;
   height: 0;
   border: 0 solid transparent;
   border-radius: 0;
   border-right-width: 50px;
   border-left-width: 50px;
   border-bottom: 100px solid #6980fe;
   background-color: transparent;
}

...

希望对您有所帮助。

CSS动画圆-三角形-正方形

1 个答案: