Codice per l'effetto di onde d'urto al click del pulsante (CSS3 e Canves)

Recentemente ho visto un ottimo effetto di clic su un pulsante, che produce un effetto di onde ondulate quando cliccato, è molto divertente, quindi l'ho implementato in modo semplice (non ho considerato la compatibilità con i browser di versione bassa)　

Guardiamo prima l'effetto, come nell'immagine seguente (il software di registrazione del gif è un po' debole, sembra un po' lento...)

　

Questo effetto può essere realizzato sia tramite il nesting di canves all'interno degli elementi che tramite CSS3.　

Implementazione di Canves　

Ho copiato un pezzo di codice di implementazione di canves da Internet, ho rimosso alcune definizioni di stile ripetute e aggiunto commenti in js, il codice è il seguente　

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

codice 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 codice:

var canvas = {},
  centerX = 0,
  centerY = 0,
  color = '',
  containers = document.getElementsByClassName('material-design')
  context = {},
  element = {},
  radius = 0,
  // Secondo callback viene generato l'animazione requestAnimationFrame
  requestAnimFrame = function () {
   return (
    window.requestAnimationFrame    || 
    window.mozRequestAnimationFrame  || 
    window.oRequestAnimationFrame   || 
    window.msRequestAnimationFrame   || 
    function (callback) {
     window.setTimeout(callback, 1000 / 60);
    }
   );
  } (),
  // Crea un canves per ogni elemento specificato
  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;
   }
  },
  // Fai clic e ottieni i dati necessari, come le coordinate del clic, la dimensione dell'elemento, il colore
  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();
  },
  // Disegna un cerchio e esegui l'animazione
  draw = function () {
   context.beginPath();
   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false)}
   context.fillStyle = color;
   context.fill();
   radius += 2;
   // Attraverso il giudizio che il raggio è inferiore alla larghezza dell'elemento, disegna in continuazione il cerchio con radius += 2
   if (radius < element.width) {
    requestAnimFrame(draw);
   }
  };
init();

Implementazione CSS3　

Quindi inizia il codice manuale...penso che CSS3 sia più comodo da implementare, forse abituato a scrivere CSS...　

html代码　

<a class="waves ts-btn">Premimi!</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;
   // Composizione della stringa di stile
   var forStyle = function(position){
    var cssStr = '';
    for( var key in position){
     if(position.hasOwnProperty(key)) cssStr += key+':'+position[key]+';';
    };
    return cssStr;
   }
   // Ottenere la posizione del clic del mouse
   var forRect = function(target){
    var position = {
     alto:0,
     sinistra:0
    }, ele = document.documentElement;
    'undefined' != typeof target.getBoundingClientRect && (position = target.getBoundingClientRect());
    return {
      alto: position.top + window.pageYOffset - ele.clientTop,
      sinistra: 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 = 'scala(' + pDiv.clientWidth / 100 * 10 + ')';
    var position = {
     alto: _height+'px',
     sinistra: _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 = {
     opacità: 0,
     "-webkit-transition-duration": duration + "ms",  // tempo di transizione
     "-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);

Ecco tutto, il principio è semplice, ottenere la posizione del clic > Aggiungi lo stile, a proposito, felice中秋节~

Questo è tutto il contenuto dell'articolo, speriamo che sia utile per la tua apprendimento, e ti preghiamo di sostenere e applaudire il tutorial.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il diritto d'autore spetta al proprietario originale, il contenuto è stato contribuito autonomamente dagli utenti di Internet e caricato autonomamente, il sito web non detiene i diritti di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, il sito web rimuoverà immediatamente il contenuto sospetto di violazione del copyright.