master

分支 (1)

管理

管理

master

front_page_effect_collection
/
按钮点击波纹效果009

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .container {
      width: 300px;
      height: 300px;
      margin: 50px auto;
      /* background-color: rgba(204, 204, 204, .6); */
      position: relative;
    }

    .btn {
      display: inline-block;
      width: 100px;
      height: 35px;
      border-radius: 24px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: none;
      outline: none;
      cursor: pointer;
      box-shadow: 0 10px 10px rgba(0, 0, 0, .3);
    }

    .ripple-effect {
      display: inline-block;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      vertical-align: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      z-index: 1;
    }

    .ripple-effect .ripple {
      display: block;
      position: absolute;
      border-radius: 100%;
      /*设置背景为彩虹渐变，可以换成其他颜色*/
      background: linear-gradient(45deg,
          rgba(255, 0, 0, .5),
          rgba(255, 255, 0, .5),
          rgba(0, 255, 255, .5),
          rgba(0, 0, 255, .5));
      -webkit-transform: scale(0);
      transform: scale(0);
      pointer-events: none;
    }

    .ripple-effect .animated {
      -webkit-animation: ripple 0.6s linear;
      animation: ripple 0.6s linear;
    }

    @keyframes ripple {
      100% {
        opacity: 0;
        -webkit-transform: scale(2.5);
        transform: scale(2.5);
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <button class="btn ripple-effect">Click
      <span class="ripple"></span>
    </button>
  </div>
</body>
<script type="text/javascript">
  window.onload = function () {
    function ripple() {
      var btn = document.querySelector(".btn");
      var ripple = document.querySelector(".ripple");
      btn.onclick = function (event) {
        this.children[0].classList.add("animated");
        var size;
        //计算点击的波纹的最大值，并设置为宽高
        size = Math.max(this.offsetWidth, this.offsetHeight);
        ripple.style.width = size + "px";
        ripple.style.height = size + "px";
        //设置鼠标点击的位置为中心点，在这个中心点向四周散开的效果
        ripple.style.top = -(this.offsetHeight - event.offsetY) + "px";
        ripple.style.left = -(this.offsetWidth / 2 - event.offsetX) + "px";
        setTimeout(function () {
          btn.children[0].classList.remove("animated");
        }, 800)
      }
    }
    ripple();
  }
</script>

</html>