涟漪效应 - 边界半径问题

Question

我制作了如下动画：

如果你有 大视网膜显示器（在小 mac 视网膜上它也有问题） - 看它看起来不错，但如果你把它带到非视网膜显示，它看起来有点模糊和矩形 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。

1400px * 3 比例的波纹 = 意味着它可以放大到 4200px，我认为这对于任何目的来说都足够了：

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>

涟漪效应 - 边界半径问题

Ripple effect - border radius issue

css

google-chrome

animation

retina-display