按钮点击效果(水波纹)

简介: 近来看到个不错的按钮点击效果,当点击时产生一次水波涟漪效果,挺好玩的,于是简单的实现了下(没考虑低版本浏览器兼容问题) 先看看效果吧,如下图(录制gif软件有点渣,看起来卡卡的...) 这种效果可以由元素内嵌套canves实现,也可以由css3实现。

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

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

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

Canves实现

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

html代码

<a class="btn color-1 material-design" data-color="#2f5398">Press me!</a>
View Code

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;
}
View Code

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();
View Code

CSS3实现

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

html代码

<a class="waves ts-btn">Press me!</a>

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代码

    document.addEventListener('DOMContentLoaded',function(){

      var duration = 750;

      // 样式string拼凑
      var forStyle = function(position){
        var cssStr = '';
        for( var key in position){
          if(position.hasOwnProperty(key)) cssStr += key+':'+position[key]+';';
        };
        return cssStr;
      }

      // 获取鼠标点击位置
      var forRect = function(target){
        var position = {
          top:0,
          left:0
        }, ele = document.documentElement;
        'undefined' != typeof target.getBoundingClientRect && (position = target.getBoundingClientRect());
        return {
            top: position.top + window.pageYOffset - ele.clientTop,
            left: position.left + window.pageXOffset - ele.clientLeft
        }
      }

      var show = function(event){
        var pDiv = event.target,
          cDiv = document.createElement('div');
        pDiv.appendChild(cDiv);
        var rectObj = forRect(pDiv),
          _height = event.pageY - rectObj.top,
          _left = event.pageX - rectObj.left,
          _scale = 'scale(' + pDiv.clientWidth / 100 * 10 + ')';
        var position = {
          top: _height+'px',
          left: _left+'px'
        };
        cDiv.className = cDiv.className + " waves-animation",
        cDiv.setAttribute("style", forStyle(position)),
        position["-webkit-transform"] = _scale,
        position["-moz-transform"] = _scale,
        position["-ms-transform"] = _scale,
        position["-o-transform"] = _scale,
        position.transform = _scale,
        position.opacity = "1",
        position["-webkit-transition-duration"] = duration + "ms",
        position["-moz-transition-duration"] = duration + "ms",
        position["-o-transition-duration"] = duration + "ms",
        position["transition-duration"] = duration + "ms",
        position["-webkit-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
        position["-moz-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
        position["-o-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
        position["transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
        cDiv.setAttribute("style", forStyle(position));
        var finishStyle = {
          opacity: 0,
          "-webkit-transition-duration": duration + "ms",
          "-moz-transition-duration": duration + "ms",
          "-o-transition-duration": duration + "ms",
          "transition-duration": duration + "ms",
          "-webkit-transform" : _scale,
          "-moz-transform" : _scale,
          "-ms-transform" : _scale,
          "-o-transform" : _scale,
          top: _height + "px",
          left: _left + "px",
        };
        setTimeout(function(){
          cDiv.setAttribute("style", forStyle(finishStyle));
          setTimeout(function(){
            pDiv.removeChild(cDiv);
          },duration);
        },100)
      }
      document.querySelector('.waves').addEventListener('click',function(e){
        show(e);
      },!1);
    },!1);

就这些,原理也简单,获取点击位置 >  添加样式   顺便,中秋快乐~

相关文章
|
4月前
|
前端开发
CSS动画(毛玻璃按钮)
CSS动画(毛玻璃按钮)
|
4月前
|
前端开发
CSS动画效果(鼠标滑过按钮动画)
CSS动画效果(鼠标滑过按钮动画)
|
10月前
水波纹按钮动画
水波纹按钮动画
42 0
水波纹按钮动画
|
存储 C++ Python
C++复刻:[流光按钮]+[悬浮波纹按钮]
[流光按钮]+[悬浮波纹按钮]
157 0
|
容器
利用CustomScrollView实现更有趣的滑动效果
本篇介绍了 CustomScrollView 的基本用法以及 SliverAppBar 的使用,通过 SliverAppBar 可以让导航栏的滑动更有趣。
797 0
利用CustomScrollView实现更有趣的滑动效果
|
XML API 数据格式
侧滑按钮
导入闭包 将以下语句倒入目录下build.gradle文件内
163 0
侧滑按钮
Qt-QML-Button-ButtonStyle-实现鼠标滑过点击效果
上次实现的自定义的Button功能是用的自定义的Rectangle来实现的,在慢慢的接触了QML之后,发现QML有自己定义的Button
538 0
Qt-QML-Button-ButtonStyle-实现鼠标滑过点击效果
鼠标拖拽翻页效果
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/w178191520/article/details/84192737 ...
993 0
|
Android开发
Android 自定义控件之SlidingMenuVertical顶部悬浮(垂直折叠抽屉,有滑动渐变回调,可自行添加渐变动画)
顶部悬浮(垂直折叠抽屉,有滑动渐变回调,可自行添加渐变动画)
2061 0