在图像点击 CSS 上创建涟漪效果

迈克·罗斯

在阅读了一些文章后，我设法在单击按钮时产生了涟漪效应。

现在我想将图像用作按钮，但是当我在图像中插入img标签时，button没有正确对齐。

$(".pulse-button").click(".pulse-button", function () {
            $(this).removeClass("clicked");
            setTimeout(function () {
                $(".pulse-button").addClass("clicked");
            }, 10);
        });

button.pulse-button {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-family: Roboto, Arial, helvetica, sans-serif;
    font-size: 30px;
    font-weight: bold;

    background-color: #DF56FC;
    border: none;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
}

button.pulse-button:active {
    padding: 0 6px;
    background-color: #DF56FC;
}

.clicked {
    animation: boxShadowAnim 1.5s forwards;
}

@keyframes boxShadowAnim {
    from {
        box-shadow: rgba(222, 80, 252, 1) 0px 0px 0px 0px;
    }
    to {
        box-shadow: rgba(255, 224, 178, 0) 0px 0px 0px 80px;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container h-100">
  <div class="row h-100 justify-content-center align-items-center">
    <div class="col-12 text-center">
      <button name="pulse-button" class="pulse-button">
        <img src="https://cdn1.imggmi.com/uploads/2019/9/5/098847ea1a681b68536212a29b6f062a-full.png" alt="">
      </button>
    </div>
  </div>
</div>

如何正确对齐图像？

谢谢

阿马雷什 SM

你期待这样吗：

将这些属性添加到 img。

img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

$(".pulse-button").click(".pulse-button", function() {
  $(this).removeClass("clicked");
  setTimeout(function() {
    $(".pulse-button").addClass("clicked");
  }, 10);
});

img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.another-btn1{

  position: absolute;
  left: 50%;
  top: 75%;
  transform: translateX(-50%) translateY(-50%);

}
.another-btn2{

  position: absolute;
  left: 50%;
  top: 85%;
  transform: translateX(-50%) translateY(-50%);

}
button.pulse-button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-family: Roboto, Arial, helvetica, sans-serif;
  font-size: 30px;
  font-weight: bold;
  background-color: #DF56FC;
  border: none;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
}

button.pulse-button:active {
  padding: 0 6px;
  background-color: #DF56FC;
}

.clicked {
  animation: boxShadowAnim 1.5s forwards;
}

@keyframes boxShadowAnim {
  from {
    box-shadow: rgba(222, 80, 252, 1) 0px 0px 0px 0px;
  }
  to {
    box-shadow: rgba(255, 224, 178, 0) 0px 0px 0px 80px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container h-100">
  <div class="row h-100 justify-content-center align-items-center">
    <div class="col-12 text-center">
      <button name="pulse-button" class="pulse-button">
        <img src="https://cdn1.imggmi.com/uploads/2019/9/5/098847ea1a681b68536212a29b6f062a-full.png" alt="">
      </button>
          <button name="pulse-button" class="another-btn1">
           btn 2
      </button>
                <button name="pulse-button" class="another-btn2">
           btn 3
      </button>
    </div>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。