涟漪效应 - 边界半径问题

Question

我制作了以下动画：

Fiddle

如果你有一个大的视网膜显示器（在小的视网膜上，它也被窃听） - 看它看起来很不错，但如果你把它带到非视网膜显示器，它看起来有点模糊和矩形-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>