Question

我正在使用缩放框来制作动画，并且将其四舍五入为8px。参考：https://codepen.io/anon/pen/ePGxqy。但是，当框扩展时，圆角是怪异的，我不想通过更改关键帧中的宽度来缩放它。如何正确缩放带有圆形边框的圆形框？

#box {
  position: relative;
  width: 55px;
  height: 55px;
  background: #aaa;
  margin: 0 auto;
  border-radius: 8px;
  animation-name: singleRevert;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

#box:hover {
  animation-name: singleExpend;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes singleRevert {
  0% {
    transform: scaleX(7.5) scaleY(0.46)
  }
  50% {
    transform: scaleX(1) scaleY(0.46)
  }
  100% {
    transform: scaleX(1) scaleY(1)
  }
}

@keyframes singleExpend {
  0% {
    transform: scaleX(1) scaleY(1)
  }
  50% {
    transform: scaleX(1) scaleY(0.46)
  }
  100% {
    transform: scaleX(7.5) scaleY(0.46)
  }
}

<div id="box"></div>

Answer 1

基本上，您需要设置边框半径的动画以匹配盒子的比例。

为简单起见，如果框半径为8px，并且将框缩放8倍，则按缩放尺寸，边框半径应为1px。如果您的框为0.5比例，则边框将为16px；

或者，您可以为盒子的宽度和高度设置动画。这样会尊重边界，在这种情况下，您不必更改边界。

更新了您的版本：

#box {
  position: relative;
  width: 55px;
  height: 55px;
  background: #aaa;
  margin: 0 auto;
  border-radius: 8px;
  animation-name: singleRevert;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

#box:hover {
  animation-name: singleExpend;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes singleRevert {
  0% {
    transform: scaleX(8) scaleY(0.5);
    border-radius: 1px;
  }
  50% {
    transform: scaleX(1) scaleY(0.5)
    border-radius: 8px;
  }
  100% {
    transform: scaleX(1) scaleY(1)
    border-radius: 8px;
  }
}

@keyframes singleExpend {
  0% {
    transform: scaleX(1) scaleY(1)
    border-radius: 8px;
  }
  50% {
    transform: scaleX(1) scaleY(0.5)
    border-radius: 8px;
  }
  100% {
    transform: scaleX(8) scaleY(0.5)
    border-radius: 1px;
  }
}

<div id="box"></div>

简单版本：

#box {
  position: relative;
  width: 55px;
  height: 55px;
  background: #aaa;
  margin: 0 auto;
  border-radius: 8px;
  animation-name: singleRevert;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

#box:hover {
  animation-name: singleExpend;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes singleRevert {
  0% {
    width: 400px;
    height: 40px;
  }
  50% {
    width: 55px;
    height: 40px;
  }
  100% {
    width: 55px;
    height: 55px;
  }
}
@keyframes singleExpend {
  0% {
    width: 55px;
    height: 55px;
  }
  50% {
    width: 55px;
    height: 40px;
  }
  100% {
    width: 400px;
    height: 40px;
  }
}

<div id="box"></div>

Answer 2

使用transform对其进行动画处理的问题在于，您正在拉伸元素。因此，无论将其设置为什么边界半径，都会随着元素的宽度和高度而拉伸。 ScaleX和ScaleY缩放整个元素，而不仅仅是尺寸。

在使边框半径保持一致的同时对元素的大小进行动画处理的一种更好的解决方案是对高度和宽度进行动画处理。这样的事情会起作用：

@keyframes singleExpend {
  0% {
    width: 55px;
    height: 55px;
  }
  50% {
    width: 55px;
    height: 40px;
  }
  100% {
    width: 400px;
    height: 40px;
  }
}

祝你好运！

CSS-具有边框半径的动画比例

2 个答案: