Question

我正在尝试在CSS，HTML和JS中制作带有涟漪效果的材质按钮，但是涟漪效应会继续覆盖这样的按钮：
-->This is a GIF of what happens
如何摆脱边界出现的波纹？我尝试使用父div来掩盖外面的波纹，但它也掩盖了阴影和按钮的一部分。

这是一个片段：

cp_v/cd_v

$(".buttons").click(function() {
  var div = $("<div/>");
  var offset = $(this).offset();
  var posx = event.pageX - offset.left;
  var posy = event.pageY - offset.top;
  div.addClass("ripple");
  div.css({
    "width": $(this).width,
    "height": $(this).height,
    "top": posy,
    "left": posx,
    "background": $(this).data("ripple_color"),
  }).appendTo($(this));
  setTimeout(function() {
    div.remove();
  }, 1500);
});
//creates a div, and gets the mouse positions. then the div gets a css class and gets inserted into the button that's clicked on. after 1.5 seconds, it is removed.

* {
  font-family: Roboto;
}


.buttons {
  background-color: transparent;
  border: none;
  position: absolute;
  text-align: center;
  color: white;
  transition-timing-function: linear;
  cursor: pointer;
  display: inline-block;
  font-size: 30px;
  font-weight: 500;
  overflow: hidden;
}
.buttons:focus {
  outline: none;
}

/*raised button (the blue one)*/
.raised_button {
  background-color: #3d81f6;
  box-shadow: 0px 4px 4px #666666;
  width: 172px;
  line-height: 72px;
  border-radius: 8px;
  transition: background-color 0.2s, box-shadow 0.2s, margin-top 0.2s;
}
.raised_button:hover {
  box-shadow: 0px 10px 24px #666666;
  margin-top: -10px;
  background-color: #326ec9;
}
.raised_button:focus {
  box-shadow: 0px 4px 18px #666666;
  margin-top: -4px;
  background-color: #326ec9;
}

/*FAB (the round red button)*/
.fab {
  height: 100px;
  background-color: #dc422f;
  transition-timing-function: linear;
  box-shadow: 0px 10px 16px #666666;
  width: 100px;
  border-radius: 100%;
  transition: background-color 0.2s, box-shadow 0.2s, margin-top 0.2s, transform 0.2s;
}
.fab:hover {
  box-shadow: 0px 24px 26px #666666;
  margin-top: -10px;
  background-color: #c43a2b;
}

/*flat button (the green one without shadows)*/
.flat_button {
  color: #4CAF50;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
  border-radius: 8px;
  transition: background-color 0.2s linear;
}
.flat_button:hover {
  background-color: rgba(200, 230, 201, 0.7);
}
.flat_button:focus {
  background-color: #E8F5E9;
}

/*ripple div that expands and creates the effect*/
.ripple {
  position: absolute;
  border-radius: 100%;
  width: 30px;
  height: 30px;
  background: white;
  animation: ripple_animation 1.5s;
}
/*ripple animation*/
@keyframes ripple_animation {
  from {
    transform: scale(1);
    opacity: 0.4;
  }
  to {
    transform: scale(100);
    opacity: 0;
  }
}

以下是相关代码：
HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,500italic,700,700italic" rel="stylesheet" type="text/css">
<button class="draggable buttons raised_button">RAISED</button>
<button class="draggable buttons fab">FAB</button>
<button class="draggable buttons flat_button">FLAT</button>
<script>
  $(".draggable").draggable({
    cancel: false
  });
</script>

CSS：

<button class="draggable buttons raised_button">RAISED</button>
<button class="buttons fab">FAB</button>
<button class="draggable buttons flat_button">FLAT</button>

JS：

.ripple {
    position: absolute;
    border-radius: 100%;
    width: 30px;
    height: 30px;
    background: white;
    animation: ripple_animation 1.5s;
}

@keyframes ripple_animation {
    from {
        transform: scale(1);
        opacity: 0.4;
    }
    to {
        transform: scale(100);
        opacity: 0;
    }
}

Answer 1

Google Material Design有一个解决方案。将以下CSS属性添加到按钮：

transform: translate3d(0, 0, 0);

问题解决了。

涟漪效应不断越过圆角（特别是圆形按钮）

1 个答案: