涟漪效应 - 边界半径问题

Question

我制作了以下动画：

Fiddle

如果你有大视网膜显示器（在小型 mac 视网膜上它也有问题） - 看到它看起来不错，但如果你把它带到非视网膜显示器上，它看起来有点模糊和 rectangle-d 而不是圆角。

如果您没有视网膜显示器（或 Mac 笔记本电脑） - 您可以使用 devtools 并将动画减慢到 10%，然后查看它在减慢时是否正常运行，但速度正常它看起来不同。

更新问题似乎主要在 Chrome 中，FF 运行良好。

简洁的 CSS：

.container {
  width: 700px;
  height: 128px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  cursor: pointer;

  .ripple-container {
    width: 100%;
    height: 100%;
    background-color: #F5B30C;
    position: relative;
    overflow: hidden;
  }

  .ripple {
    position: absolute;
    background-color: blue;
    top: 0;
    right: 0;
    height: 3px;
    width: 3px;
    border-radius: 50%;
    transition: transform 1s;

    &.rippler-active {
      transition: transform 0.5s;
      transform: scale(500);
    }
  }
}

Answer 1

而不是从 1 扩展到 500（这会产生各种地下邪恶的错误）...
从 0 缩放到（比如说）3，但不是将初始大小设置为 0（或 3px），而是需要设置为像 1400px 这样的大尺寸。

1400 像素 * 3 比例的波纹 = 意味着它可以扩展到 4200 像素，我认为这对于任何目的来说都绰绰有余：

var el = document.querySelector('.container');
var ripple = document.querySelector('.ripple');

el.addEventListener('click', function() {
  ripple.classList.toggle("ripple-active")
});

.container {
  height: 128px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  cursor: pointer;
}

.ripple-container {
  width: 100%;
  height: 100%;
  background-color: #F5B30C;
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  background-color: #3f3fd8;
  top: 0;
  right: 0;
  height: 1400px;
  width: 1400px;
  /* Notice the size!! */
  margin: -700px -700px auto auto;
  /* and set here the desired offset */
  border-radius: 50%;
  transition: transform 2s;
  transform: scale(0);
}

.ripple.ripple-active {
  transition: transform 2s;
  transform: scale(3);            /* 1400 * 3 !!! yey */
}

<div class="container">
  <div class="ripple-container">
    <div class="ripple"></div>
  </div>
</div>