JS Click button to achieve water ripple effect code (CSS3 and canves) _javascript tips

Recently saw a good button click Effect, when the click to produce a ripple effect of the ripples, it is fun, so simple implementation of the next (not consider the low version of browser compatibility issues)

First look at the effect bar, the following figure (recording GIF software a little slag, it looks like Kaka's ...) ）

This effect can be implemented by an element nested canves or by CSS3.

Canves implementation

Online pick up a copy of the canves implementation of the code, slightly removed some of the repeated definition of the style and give a JS note, the code is as follows

HTML code:<a class= "btn color-1 material-design " data-color= "#2f5398" >press me!</a>

CSS code:

* {
 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 Code:

var canvas = {}, CenterX = 0, centery = 0, color = ', containers = document.getelementsbyclassname (' Material-des  IGN ') context = {}, element = {}, radius = 0,/////callback Requestanimationframe Animation Requestanimframe = function 
    () {return (Window.requestanimationframe | | 
    Window.mozrequestanimationframe | | 
    Window.orequestanimationframe | | 
    Window.msrequestanimationframe | |
    Function (callback) {Window.settimeout (callback, 1000/60);
  }
   );
   (),//generates canves init = function () {containers = Array.prototype.slice.call (containers) for each specified element;
    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; },//Click and get the required data, such as click Coordinates, element size, Color 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 a circle, and perform an animated draw = function () {Context.beginpath ();
   Context.arc (CenterX, centery, radius, 0, 2 * Math.PI, FALSE);
   Context.fillstyle = color;
   Context.fill ();
   RADIUS = 2;
   Circular if (RADIUS < element.width) {Requestanimframe (draw) of radius = 2 is continuously drawn by determining that the radius is less than the element width;

}
  };
 Init ();

CSS3 Implementation

Next is the pure hand code ... Feel or CSS3 to achieve more convenient, may be the CSS write habits ...

HTML code

<a class= "Waves ts-btn" >press me!</a>

CSS Code

. 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 Code

 Document.addeventlistener (' domcontentloaded ', function () {var duration = 750;
    Style string patchwork var forstyle = function (position) {var cssstr = ';
    for (var key in position) {if (Position.hasownproperty (key)) Cssstr + = key+ ': ' +position[key]+ ';
    };
   return cssstr; //Get mouse click position var forrect = function (target) {var position = {top:0, left:0}, ele = Document.do
    Cumentelement;
    ' Undefined '!= typeof target.getboundingclientrect && (position = Target.getboundingclientrect ()); return {top:position.top + window.pageyoffset-ele.clienttop, Left:position.left + Window.pagexoffset-el E.clientleft}} var show = function (event) {var pdiv = event.target, Cdiv = document.createelement (' d
    IV ');
    Pdiv.appendchild (CDIV); var rectobj = Forrect (pdiv), _height = event.pagey-rectobj.top, _left = Event.pagex-rectobj.left, _scal E = ' 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["W Ebkit-transform "] = _scale, position["-moz-transform "] = _scale, position["-ms-transform "] = _scale, position[ "-o-transform"] = _scale, Position.transform = _scale, position.opacity = "1", position["-webkit-transition-du" Ration "] = Duration +" Ms ", position["-moz-transition-duration "] = Duration +" Ms ", position["-o-transition-durati " On "] = Duration +" Ms ", position[" transition-duration "] = Duration +" Ms ", position["-webkit-transition-timing-fun " Ction "] =" Cubic-bezier (0.250, 0.460, 0.450, 0.940) ", position["-moz-transition-timing-function "] =" cubic-bezier "(0.25
    0, 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",//Transition time-moz-transition-d
     Uration ": Duration +" MS ","-o-transition-duration ": Duration +" MS "," transition-duration ": Duration +" MS ", "-webkit-transform": _scale, "-moz-transform": _scale, "-ms-transform": _scale, "-o-transform": _sca
    Le, 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);

On these, the principle is also simple, get click position > Add style by the way, happy Mid-Autumn Festival ~

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.