css动画-实现一个最简单的水波纹效果button

Hancock_Xu 发布于2019-08-30 15:56 / 2480人阅读

摘要：类似的效果步骤在页面写出一个并赋予简单的样式代码这是一个按钮默认是无法用给它居中为了增加用户体验为了保持和的位置关系为了遮盖超出的效果添加水波纹的基础样式代码为了保持和的位置关系水波纹圆形水波纹颜色下面与动画效果相关是时候的状态默认

类似material-ui的button效果 步骤 1. 在页面写出一个button 并赋予简单的样式

代码

button {
   display: block; /* button 默认是inline-block 无法用margin给它居中 */
   margin: 50px auto;
   height: 60px;
   width: 150px;
   color: #FFF;
   font-size: 16px;
   background: #E95546;
   outline: none;
   border: 0;
   cursor: pointer; /* 为了增加用户体验 */
   
   position: relative; /* 为了保持和ripple的位置关系 */
   overflow: hidden; /* 为了遮盖超出的ripple */
}

效果

2. 添加水波纹的基础css样式

代码

.ripple {
  position: absolute; /* 为了保持和button的位置关系 */
  border-radius: 50% 50%; /* 水波纹圆形 */
  background: rgba(255, 255, 255, 0.4);  /* 水波纹颜色 */
  
  /* 下面与动画效果相关 是0%时候的状态 */
  /* 默认的 transform-origin 是 center 即中心点 */
  transform: scale(0); 
  -webkit-transform: scale(0);
  opacity: 1; 
}

3. 给水波纹加上动画的css

代码

.rippleEffect {
  /* 执行时长0.6s、效果为渐变(linear)、名称为rippleDrop的动画 */
  -webkit-animation: rippleDrop .6s linear; 
  animation: rippleDrop .6s linear;
}

@keyframes rippleDrop {
  /* 下面是动画100%时候的状态 */
  100% {
    transform: scale(2); 
    -webkit-transform: scale(2);
    opacity: 0;
  }
}

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

4. 最后添加点击事件

代码

$("button").click(function (e) {
  $(".ripple").remove(); // 每次先把之前添加的水波纹div删除

  let button_left = $(this).offset().left; // button距离页面左边的距离
  let button_top = $(this).offset().top; // button距离页面上边的距离
  let button_width = $(this).width(); // button的宽度
  let button_height = $(this).height(); // button的高度

  // 水波纹div为一个圆形，使得它的半径等于button的最长边，故在这里计算最长边是多少
  let ripple_width = 0;
  ripple_width = button_width > button_height ? button_width : button_height; 

  // e.pageX是click事件的鼠标触发点距离页面左边的距离
  // e.pageY是click事件的鼠标触发点距离页面上边的距离
  // 这里的算法是，算出鼠标点击点的坐标为 (e.pageX - button_left, e.pageY - button_top)
  // 但是由于`transform-origin`默认是center，所以这里再减去半径才是div应该的位置
  let ripple_x = e.pageX - button_left - ripple_width / 2;
  let ripple_y = e.pageY - button_top - ripple_width / 2;
 
  // 往button里面塞水波纹div
  $(this).prepend("");
  
  // 给水波纹div应用样式和动画
  $(".ripple")
  .css({
    width: ripple_width + "px",
    height: ripple_width + "px",
    top: ripple_y + "px",
    left: ripple_x + "px"
  })
  .addClass("rippleEffect");

})

Attention 别忘了引入jquery哦

效果

END

源码地址

云服务器 GPU云服务器水波纹动画波纹进度动画水波纹效果 html 波纹效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117480.html

使用CSS实现逼真的水波纹点击效果

这篇文章特别介绍如何使用CSS来完成水波纹的效果。 div的层层叠叠虽然webkit具有遮罩的能力（webkit mask），不过webkit虽然强大，但在跨浏览器上总是它的罩门，况且在性能上也是往往会造成困扰（这也是为什么chrome要这么吃资源了），因此撇开webkit不谈，我们该用什么方法，才可以做出水波纹的效果呢？答案就是用叠的方式，这个水波纹效果的原理其实就是用六个div叠在一起，接着...

Tony_Zby 2019-08-02 16:16 评论0 收藏0
使用CSS实现逼真的水波纹点击效果

这篇文章特别介绍如何使用CSS来完成水波纹的效果。 div的层层叠叠虽然webkit具有遮罩的能力（webkit mask），不过webkit虽然强大，但在跨浏览器上总是它的罩门，况且在性能上也是往往会造成困扰（这也是为什么chrome要这么吃资源了），因此撇开webkit不谈，我们该用什么方法，才可以做出水波纹的效果呢？答案就是用叠的方式，这个水波纹效果的原理其实就是用六个div叠在一起，接着...

Cciradih 2019-08-30 10:52 评论0 收藏0
原生js+css 实现 material design 点击效果

摘要：最近想要在按钮上添加的点击效果，看了看，单纯的想要这种效果，而要引入一些不必要的内容觉得不划算，然后自己动手造了个轮子。项目地址上传不了图只能用了效果使用文字只要在内添加并且在内传入便可以实现水波纹效果。最近想要在按钮上添加material design的点击效果，看了看muse-ui，单纯的想要这种效果，而要引入一些不必要的内容觉得不划算，然后自己动手造了个轮子。项目地址：gith...

NickZhou 2019-08-20 17:15 评论0 收藏0
原生js+css 实现 material design 点击效果

摘要：最近想要在按钮上添加的点击效果，看了看，单纯的想要这种效果，而要引入一些不必要的内容觉得不划算，然后自己动手造了个轮子。项目地址上传不了图只能用了效果使用文字只要在内添加并且在内传入便可以实现水波纹效果。最近想要在按钮上添加material design的点击效果，看了看muse-ui，单纯的想要这种效果，而要引入一些不必要的内容觉得不划算，然后自己动手造了个轮子。项目地址：gith...

tolerious 2019-08-29 12:46 评论0 收藏0
原生js+css 实现 material design 点击效果

摘要：最近想要在按钮上添加的点击效果，看了看，单纯的想要这种效果，而要引入一些不必要的内容觉得不划算，然后自己动手造了个轮子。项目地址上传不了图只能用了效果使用文字只要在内添加并且在内传入便可以实现水波纹效果。最近想要在按钮上添加material design的点击效果，看了看muse-ui，单纯的想要这种效果，而要引入一些不必要的内容觉得不划算，然后自己动手造了个轮子。项目地址：gith...

why_rookie 2019-08-01 16:58 评论0 收藏0