Js click the button to implement the Water ripple effect code (CSS3 and Canves), css3canves

Js click the button to implement the Water ripple effect code (CSS3 and Canves), css3canves

Recently, I saw a good button click effect. When I click it, it produces a ripple effect, which is quite interesting. So I implemented it simply (without considering the compatibility of earlier browsers)

Let's take a look at the effect, for example, (the gif recording software is a little scum and looks like kakaka ...)

 

This effect can be implemented by nested canves in the element, or by css3.

Canves implementation

I picked a canves implementation code on the internet, slightly removed some repetitive styles and provided js comments. 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-Design') context ={}, element ={}, radius = 0, // generate the requestAnimationFrame animation requestAnimFrame = function () {return (window. requestAnimationFrame | window. required requestanimationframe | window. oRequestAnimationFrame | window. msRequestAnimationFrame | function (callback) {window. setTimeout (callback, 1000/60) ;}}(), // generate canves init = function () {containers = Array for each specified element. 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 = '000000'; canvas. style. height = '20180101'; canvas. width = canvas. offsetWidth; canvas. height = canvas. offsetHeight ;}}, // click to obtain 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 execute the animation draw = function () {context. beginPath (); context. arc (centerX, centerY, radius, 0, 2 * Math. PI, false); context. fillStyle = color; context. fill (); radius + = 2; // By judging that the radius is smaller than the element width, draw a circle with radius + = 2 if (radius <element. width) {requestAnimFrame (draw) ;}}; init ();

CSS3 implementation 

The next step is the pure-handed code... I think it is more convenient to implement css3. It may be because css is used to writing...

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 ('domainloaded', 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 ;} // obtain the mouse click position var forRect = function (target) {var position = {top: 0, left: 0}, ele = document.doc umentElement; '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.tar get, 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. t Ransform = _ 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-bezr (0.250, 0.460, 0.450, 0.940) ", position ["-moz-transition-timing-function "] = "Cubic-besuppliers (0.250, 0.460, 0.450, 0.940)", position ["-o-transition-timing-function"] = "cubic-besuppliers (0.250, 0.460, 0.450, 0.940) ", position [" transition-timing-function "] =" cubic-bezr (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-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 ('.Wav es '). addEventListener ('click', function (e) {show (e );},! 1 );},! 1 );

In this case, the principle is also simple. Get the Click location> Add style. By the way, happy Mid-Autumn Festival ~

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.