Material Design风格纯js按钮点击波特效

演示效果

html部分: 

  <button data-ripple> Demo button 6 </button>

css部分:

  .ripple-container {}

  .ripple-container .ripple {
    background-color: rgba(255, 255, 255, 0.4);
    animation: ripple 2s forwards cubic-bezier(0, 0, 0.2, 1);
  }

  @keyframes ripple {
    0% {
      transform: scale(0);
      opacity: 1;
    }
    80% {
      transform: scale(1);
    }
    100% {
      opacity: 0;
    }
  }

js部分:

  <script src="ripple.js"></script>

  <script type="text/javascript">
   
 Array.prototype.forEach.call(document.querySelectorAll('[data-ripple]'), function(element) {
      new RippleEffect(element); 
    });
  </script>

完整demo: 

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="ripple.css" />
<style>
button{
outline: none;
border: none;
cursor: pointer;
}
button {
background-color: #3e3e3e;
padding: 5px 30px;
font: 14px/30px "微软雅黑";
color: #fff;
display: block;
border-bottom: 1px solid #ccc;
}
button:hover{
background-color: #525252;
}
</style>
</head>

<body>
<button data-ripple>
Demo button 1
</button>
<button data-ripple>
Demo button 2
</button>
<button data-ripple>
Demo button 3
</button>
<button data-ripple>
Demo button 4
</button>
<button data-ripple>
Demo button 5
</button>
<button data-ripple>
Demo button 6
</button>
</body>
<script src="ripple.js"></script>
<script>
Array.prototype.forEach.call(document.querySelectorAll('[data-ripple]'), function(element) {
new RippleEffect(element);
});
</script>
<script>
var btns = document.querySelectorAll("button");
var len = btns.length;
for(var i=0; i<len; i++){
btns[i].index = i;
btns[i].onclick = function(){
//console.log(this.index);
for(var j=0; j<len; j++){
btns[j].style.background = "#3e3e3e";
}
this.style.background = "#b63745";
}
}
</script>
</html>

js点击按钮button效果(波效果)的更多相关文章

  1. Bootstrap的js插件之按钮(button)

    1)属性: data-loading-text="载入中..."--使button呈现载入状态: data-toggle="button"--使按钮可以切换状态 ...

  2. JS点击按钮打开新的独立页面

    工作中遇到需要点击按钮弹出一个独立的页面,并显示指定内容的问题,查了一些资料后,得到以下方法: window.open('locationPage.html', '_blank', 'height=1 ...

  3. html js点击按钮滚动跳转定位到页面指定位置(DIV)的方法代码

    一:通过html锚点实现滚动定位到页面指定位置(DIV):    如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的d ...

  4. JS点击按钮弹出窗口

    由于没有系统学习过JS,遇到一个需求:点击按钮,弹出一个独立的窗口. 在网上百度了一下,并没有找到满意的结果,最重要的是各种方法很复杂.最终,仔细研究了一下,原来只是需要只要一个简单的函数就能满足自己 ...

  5. js点击按钮为元素随机字体颜色和背景色

    文章地址 https://www.cnblogs.com/sandraryan/ 写两个button和一个div,点击按钮分别改变背景色和前景色(字体颜色).产生的是一个随机颜色. <!DOCT ...

  6. js点击按钮触发事件的方法

    <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <input id= ...

  7. winfrom 点击按钮button弹框显示颜色集

    1.窗体托一个按钮button: 2.单击事件: private void btnForeColor_Click(object sender, EventArgs e) { using (ColorD ...

  8. jquery 实现点击按钮后出现倒计时效果(用于实现发送手机验证码、邮箱验证码)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js点击更多显示更多内容效果

    我写了一个简单的分段显示插件,用法很简单:1,把你要分面显示的内容的容器元素增加一个class=showMoreNChildren,并增加一个自定义属性pagesize="8" 这 ...

随机推荐

  1. 玩转淘宝SVN

    http://guojun2sq.blog.163.com/blog/static/64330861201492965059142/(参考) 三步走: 1.注册账号http://code.taobao ...

  2. VIJOS-P1045 Kerry 的电缆网络

    JDOJ 1229: VIJOS-P1045 Kerry 的电缆网络 https://neooj.com/oldoj/problem.php?id=1229 Description         K ...

  3. Computer Network Chapter4 solution

    1.以太网使用曼彻斯特编码,效率50% 2.侦听信道时间:来回延时时间(10usec):发送数据(25.6usec): 3.单向时延t=S(距离)/V(电缆传输速率):最小帧长=2*t*C(数据传输速 ...

  4. Salesforce 自定义元数据类型

    自定义元数据类型的优点 Salesforce中的设定都是以元数据(Metadata)存在的.在Salesforce中,用户可以新建自定义对象.自定义字段等,这些数据结构都以元数据的形式存储在系统中.当 ...

  5. python异步编程

    python用asyncio 模块实现异步编程,该模块最大特点就是,只存在一个线程 由于只有一个线程,就不可能多个任务同时运行.asyncio 是"多任务合作"模式(coopera ...

  6. IAR环境搭建

    工具下载:https://pan.baidu.com/s/1nwv0RVz 第一步:右键点击EW8051-EV-8103-Web.exe,使用管理员权限运行. 第二步:我们运行之后只要一直Next下去 ...

  7. nginx日志说明

    一.日志说明 nginx日志主要有两种:访问日志和错误日志.访问日志主要记录客户端访问nginx的每一个请求,格式可以自定义:错误日志主要记录客户端访问nginx出错时的日志,格 式不支持自定义.两种 ...

  8. github git clone ssh协议 clone超慢解决方案,提高Github Clone速度

    即使进行了fq吧但是git clone ssh协议就是慢 2kb/s你能忍,坚决不能忍. github git clone ssh协议 clone超慢解决方案 151.101.72.249 globa ...

  9. Python爬取豆瓣电影top

    Python爬取豆瓣电影top250 下面以四种方法去解析数据,前面三种以插件库来解析,第四种以正则表达式去解析. xpath pyquery beaufifulsoup re 爬取信息:名称  评分 ...

  10. sql server 2019 & spark

    https://cloudblogs.microsoft.com/sqlserver/2019/04/01/how-to-develop-and-submit-spark-jobs-to-sql-se ...