基于JS+Canves实现点击按钮水波纹效果

时间: 作者:技照

  

[点击按钮,水波纹,js,点击按钮水波纹]基于JS+Canves实现点击按钮水波纹效果

  

近来看到个不错的按钮点击效果,当点击时产生一次水波涟漪效果,挺好玩的,于是简单的实现了下(没考虑低版本浏览器兼容问题)  

  

先看看效果吧,如下图(录制gif软件有点渣,看起来卡卡的...)  

  

  

  

这种效果可以由元素内嵌套canves实现,也可以由css3实现。

  

  

Canves实现  

  

网上摘了一份canves实现的代码,略微去掉了些重复定义的样式并且给出js注释,代码如下  

  

html代码  

  
  
  Press me!
  
  

css代码  

  
  
  * {  box-sizing: border-box;  outline: none;  }  body {  font-family: 'Open Sans';  font-size: 100%;  font-weight: 300;  line-height: 1.5em;  text-align: center;  }  .btn {  border: none;  display: inline-block;  color: white;  overflow: hidden;  margin: 1rem;  padding: 0;  width: 150px;  height: 40px;  text-align: center;  line-height: 40px;  border-radius: 5px;  }  .btn.color-1 {  background-color: #426fc5;  }  .btn-border.color-1 {  background-color: transparent;  border: 2px solid #426fc5;  color: #426fc5;  }  .material-design {  position: relative;  }  .material-design canvas {  opacity: 0.25;  position: absolute;  top: 0;  left: 0;  }  .container {  align-content: center;  align-items: flex-start;  display: flex;  flex-direction: row;  flex-wrap: wrap;  justify-content: center;  margin: 0 auto;  max-width: 46rem;  }
  
  

js代码  

  
  
  var canvas = {},  centerX = 0,  centerY = 0,  color = '',  containers = document.getElementsByClassName('material-design')  context = {},  element = {},  radius = 0,  // 根据callback生成requestAnimationFrame动画  requestAnimFrame = function () {  return (  window.requestAnimationFrame ||  window.mozRequestAnimationFrame ||  window.oRequestAnimationFrame ||  window.msRequestAnimationFrame ||  function (callback) {  window.setTimeout(callback, 1000 / 60);  }  );  } (),  // 为每个指定元素生成canves  init = function () {  containers = Array.prototype.slice.call(containers);  for (var i = 0; i < containers.length; i += 1) {  canvas = document.createElement('canvas');  canvas.addEventListener('click', press, false);  containers[i].appendChild(canvas);  canvas.style.width ='100%';  canvas.style.height='100%';  canvas.width = canvas.offsetWidth;  canvas.height = canvas.offsetHeight;  }  },  // 点击并且获取需要的数据,如点击坐标、元素大小、颜色  press = function (event) {  color = event.toElement.parentElement.dataset.color;  element = event.toElement;  context = element.getContext('2d');  radius = 0;  centerX = event.offsetX;  centerY = event.offsetY;  context.clearRect(0, 0, element.width, element.height);  draw();  },  // 绘制圆形,并且执行动画  draw = function () {  context.beginPath();  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);  context.fillStyle = color;  context.fill();  radius += 2;  // 通过判断半径小于元素宽度,不断绘制 radius += 2 的圆形  if (radius < element.width) {  requestAnimFrame(draw);  }  };  init();
  
  

CSS3实现  

  

接下来就是纯手打的代码了...觉得还是css3实现的方便些,可能是css写习惯了...

  

  

html代码  

  
  
  Press me!
  
  

css代码  

  
  
  .waves{  position:relative;  cursor:pointer;  display:inline-block;  overflow:hidden;  text-align: center;  -webkit-tap-highlight-color:transparent;  z-index:1;  }  .waves .waves-animation{雅星娱乐  position:absolute;  border-radius:50%;  width:25px;  height:25px;  opacity:0;  background:rgba(255,255,255,0.3);  transition:all 0.7s ease-out;  transition-property:transform, opacity, -webkit-transform;  -webkit-transform:scale(0);  transform:scale(0);  pointer-events:none  }  .ts-btn{  width: 200px;  height: 56px;  line-height: 56px;  background: #f57035;  color: #fff;  border-radius: 5px;  }
  
  

js代码  

   (责任编辑:admin)

推荐图片Related

相关文章Related

查看更多热门新闻


首页 | 特效插件 | 常用代码 | 样式素材 | 脚本代码 | css特效

Copyright © 2017-2018 雅星娱乐 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | RSS订阅 | 雅星娱乐