波浪按钮~

梦诺七棠

已于 2022-03-05 20:31:34 修改

阅读量854

点赞数 1

文章标签： css css3 html

于 2022-03-05 20:29:39 首次发布

本文链接：https://blog.csdn.net/qq_53663696/article/details/123299963

版权

文章目录

前言
一、如何产生波纹效果？
二、实现步骤
总结
总代码

前言

点击按钮会产生波纹效果，也可以弄成途径按钮产生波纹效果。请耐心看完谢谢。
波浪按钮

tips：以下是本篇文章正文内容，下面案例可供参考

一、如何产生波纹效果？

可以通过button按钮内嵌span标签，然后给span标签添加样式扩大的2d动画，这里采用的是原先就写死一个span在button里面，也有的是通过写js的方式动态创建一个span，本文采用的是上一种方式。

二、实现步骤

1.写一个button内嵌一个span

代码如下：

<div class="container">
  <button class="btn">Click
    <span class="ripple"></span>
  </button>
</div>

2.写按钮样式：(具体样式自定)

代码如下：

.btn {
  width: 100px;
  height: 30px;
  position: absolute; /*绝对定位为div设置相对定位*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /*居中*/
  outline: none; /*取消点击后的边框*/
  border: none; /*取消默认按钮边框*/
  border-radius: 20px; /*变成胶囊状*/
  box-shadow: 10px 10px 5px #888888; /*阴影从左到右水平 垂直 高斯模糊度 颜色*/
  cursor: pointer; /*鼠标样式为小手*/
  transition: all 400ms; /*过渡 400毫秒*/
  overflow: hidden; /*超过部分隐藏 可不写*/
}

3.写span标签样式：(具体样式自定)

代码如下：

.ripple {
  display: block; /*变成块级样式这样才能扩大*/
  position: absolute; /*绝对定位方便后面设置left值以及top值*/
  border-radius: 100%; /*圆角100%*/
  background: linear-gradient(45deg, #87c437, #5e3333, #ffeb3d, #88acbc);
  -webkit-transform: scale(0); /*默认从0开始兼容性考虑*/
  transform: scale(0); /*默认从0开始*/
  pointer-events: none; /*取消span标签的鼠标事件*/
}

4.动画效果：(具体样式自定)

代码如下：

.animated {
  animation: ripple 400ms linear; /*持续400ms结束 匀速*/
}
@keyframes ripple {
  to {
    transform: scale(4); /*等比放大4倍*/
    opacity: 0; /*规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）*/
  }
}

5.JavaScript部分

代码如下：

var btn = document.querySelector(".btn"); // 获取按钮dom
var ripple = document.querySelector(".ripple"); //获取span的dom
var timer = null; // 默认定时器为空
btn.onclick = function (event) {
  clearTimeout(timer); // 清除定时器防止抖动
  this.children[0].classList.add("animated"); // 给btn添加一个类名
  var size, ripplex, rippleY;
  size = Math.max(this.offsetWidth, this.offsetHeight); // 获取按钮的高度与宽度相对的最大值
  ripple.style.width = size + "px"; // 定义span宽度
  ripple.style.height = size + "px"; // 定义span高度
  ripple.style.top = - (this.offsetHeight - event.offsetY) + "px"; // 定义鼠标点击按钮后绝对定位偏移的top值
  ripple.style.left = - (this.offsetWidth / 2 - event.offsetX) + "px"; // 定义鼠标点击按钮后绝对定位偏移的left值
  // setTimeout 只执行一次
  timer = setTimeout(function () {
    btn.children[0].classList.remove("animated");
  }, 400)
}

总结

注意this.offsetX(this.offsetY)与事件函数中event.offsetX和event.offsetY的区别。
定时器可以用来做防抖可以防止用户过分点击。
opacity是透明度0表示全透明背景颜色还是可以显示。
可以采用添加类名的方式添加动画，方便复用。

总代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }

    .container {
      width: 500px;
      height: 300px;
      margin: 0 auto;
      text-align: center;
      position: relative;
      background-color: lightgrey;
    }

    .btn {
      width: 100px;
      height: 30px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      outline: none;
      border: none;
      border-radius: 20px;
      box-shadow: 10px 10px 5px #888888;
      /*水平 垂直 高斯模糊度*/
      cursor: pointer;
      transition: all 400ms;
      overflow: hidden;
    }

    .ripple {
      display: block;
      position: absolute;
      border-radius: 100%;
      background: linear-gradient(45deg, #87c437, #5e3333, #ffeb3d, #88acbc);
      -webkit-transform: scale(0);
      transform: scale(0);
      pointer-events: none;
    }

    .animated {
      animation: ripple 400ms linear;
    }

    @keyframes ripple {
      to {
        transform: scale(4);
        opacity: 0;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <button class="btn">Click
      <span class="ripple"></span>
    </button>
  </div>
</body>
<script type="text/javascript">
  var btn = document.querySelector(".btn");
  var ripple = document.querySelector(".ripple");
  var timer = null;
  btn.onclick = function (event) {
    clearTimeout(timer)
    this.children[0].classList.add("animated");
    var size, ripplex, rippleY;
    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";
    console.log(this.offsetWidth);
    console.log(event.offsetX);
    ripple.style.left = - (this.offsetWidth / 2 - event.offsetX) + "px";
    // setTimeout 只执行一次
    timer = setTimeout(function () {
      btn.children[0].classList.remove("animated");
    }, 400)
  }
</script>

</html>

梦诺七棠

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
波浪按钮~

文章目录前言一、如何产生波纹效果？二、实现步骤1.写一个button内嵌一个span2.写按钮样式：(具体样式自定)3.写span标签样式：(具体样式自定)4.动画效果：(具体样式自定)5.JavaScript部分总结前言点击按钮会产生波纹效果，也可以弄成途径按钮产生波纹效果。请耐心看完谢谢。tips：以下是本篇文章正文内容，下面案例可供参考一、如何产生波纹效果？可以通过button按钮内嵌span标签，然后给span标签添加样式扩大的2d动画，这里采用的是原先就写死一个span在button
复制链接

扫一扫