在css中用圆形div掩盖动画

Question

我正在创建一个带有涟漪效果的谷歌材质设计按钮，但当我希望它成为圆形时，我的动画显示为方形。

这是因为动画的大小大于它所在的div，然后填充外部div的边缘，使其看起来像一个正方形。有没有办法将外部div本身设置为圆形，因为即使我设置了border-radius: 50%，div本身（不是在div中创建的形状）仍然是正方形。

HTML：

<div id="imgs">
    <div id="button"></div>
</div>

的CSS：

#button{
  position: relative;
  overflow: hidden;
  height: 56px;
  width: 56px;
  border-radius: 50%;
  -webkit-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.75);
   box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.75);
}

.drop{
  display: block;
  position: absolute;
  background: hsl(180, 40%, 80%);
  border-radius: 50%;
  transform: scale(0);
}

.drop.animate {
  -webkit-animation-name: ripple;
  -webkit-animation-duration: 0.65s;
  -webkit-animation-timing-function: linear;
}

@-webkit-keyframes ripple {
  100% {opacity: 0; transform: scale(2.5);}
}

我认为给#button属性overflow: hidden会产生蒙面效果，但事实并非如此。

的javascript：

var parent, ink, d, x, y;## Heading ##
$("#imgs #button").click(function(e){
    element = $(this);
    if(element.find(".drop").length === 0)
        element.prepend("<span class='drop'></span>");

    drop = element.find(".drop");
    drop.removeClass("animate");

    if(!drop.height() && !drop.width())
    {
        d = Math.max(element.outerWidth(), element.outerHeight());
        drop.css({height: d, width: d});
    }

    x = e.pageX - element.offset().left - drop.width()/2;
    y = e.pageY - element.offset().top - drop.height()/2;

    //set the position and add class .animate
    drop.css({top: y+'px', left: x+'px'}).addClass("animate");
});

这是一个有效的fiddle，您可以在其中看到上述代码生成的效果。如何改变它以使波纹动画显示为圆形（局限于圆形按钮）而不是平方（扩展按钮的边界）？

Answer 1

此问题是由报告的chrome错误引起的。还没有修复，但有一个简单的解决方法，不会影响审美。

你需要为元素添加一个变换：-webkit-transform: rotate(0.000001deg);它可以很小，以至于难以察觉，但这应该足以通过提升元素的绘制顺序来修复它。

var parent, ink, d, x, y;
$("#imgs #button").click(function(e) {
  element = $(this);
  if (element.find(".drop").length === 0)
    element.prepend("<span class='drop'></span>");

  drop = element.find(".drop");
  drop.removeClass("animate");

  if (!drop.height() && !drop.width()) {
    d = Math.max(element.outerWidth(), element.outerHeight());
    drop.css({
      height: d,
      width: d
    });
  }

  x = e.pageX - element.offset().left - drop.width() / 2;
  y = e.pageY - element.offset().top - drop.height() / 2;

  //set the position and add class .animate
  drop.css({
    top: y + 'px',
    left: x + 'px'
  }).addClass("animate");
});

#button {
  position: relative;
  overflow: hidden;
  height: 56px;
  width: 56px;
  border-radius: 50%;
  -webkit-box-shadow: 0 1px 5px 0 rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 0 1px 5px 0 rgba(50, 50, 50, 0.75);
  box-shadow: 0 1px 5px 0 rgba(50, 50, 50, 0.75);
  -webkit-transform: rotate(0.000001deg); /* This is the important bit */
}
.drop {
  height: 56px;
  width: 56px;
  display: block;
  position: absolute;
  background: hsl(180, 40%, 80%);
  border-radius: 90%;
  transform: scale(0);
}
.drop.animate {
  -webkit-animation-name: ripple;
  -webkit-animation-duration: 0.65s;
  -webkit-animation-timing-function: linear;
}
@-webkit-keyframes ripple {
  100% {
    opacity: 0;
    transform: scale(2.5);
    border-radius: 90%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imgs">
  <div id="button"></div>
</div>

以下是错误的细分：

https://code.google.com/p/chromium/issues/detail?id=157218