Code pour réaliser l'effet de onde de choc en cliquant sur un bouton (CSS3et Canves)

Récemment, j'ai vu un effet de clic de bouton sympa, qui produit un effet de vague ondulante lors du clic, ce qui est assez amusant, donc j'ai réalisé une version simple (sans prendre en compte la compatibilité avec les navigateurs de versions inférieures)　

Regardons d'abord l'effet, comme montré dans l'image suivante (le logiciel de capture d'écran est un peu moche, il paraît un peu laggy...)

　

Cet effet peut être réalisé par un canves imbriqué dans l'élément, ou par CSS3implémentation.　

Implémentation de Canves　

J'ai copié un morceau de code d'implémentation de canves en ligne, j'ai légèrement supprimé des styles redondants et ajouté des commentaires en js, voici le code :　

html代码：<a class="btn color-1 material-design" data-color="#2f5398">Appuyez sur moi !</a>

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,
  // Génère l'animation requestAnimationFrame à partir de callback
  requestAnimFrame = function () {
   return (
    window.requestAnimationFrame    || 
    window.mozRequestAnimationFrame  || 
    window.oRequestAnimationFrame   || 
    window.msRequestAnimationFrame   || 
    function (callback) {
     window.setTimeout(callback, 1000 / 60);
    }
   );
  } (),
  // Génère un canves pour chaque élément spécifié
  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;
   }
  },
  // Cliquez et obtenez les données nécessaires, telles que les coordonnées de clic, la taille de l'élément, la couleur
  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();}}
  },
  // Dessiner un cercle et exécuter l'animation
  draw = function () {
   context.beginPath();
   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
   context.fillStyle = color;
   context.fill();
   radius += 2;
   // En jugant que le rayon est inférieur à la largeur de l'élément, on dessine constamment le radius += 2 circulaire
   if (radius < element.width) {
    requestAnimFrame(draw);
   }
  };
init();

CSS3implémentation　

Ensuite, il ne reste plus que du code tapé à la main...Je pense toujours que c'est CSS3Il est plus facile de l'implémenter, peut-être que j'ai l'habitude de coder en CSS...　

Code HTML　

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

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

Code JavaScript　

 document.addEventListener('DOMContentLoaded',function(){
   var duration = 750;
   // Compilation de chaîne de style
   var forStyle = function(position){
    var cssStr = '';
    for( var key in position){
     if(position.hasOwnProperty(key)) cssStr += key+:+position[key]+';';
    };
    return cssStr;
   }
   // Obtenir la position du clic de la souris
   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-"cubic" = "cubic"-bezier(0.250, 0.460, 0.450, 0.940)",
    position["-moz-transition-timing-"cubic" = "cubic"-bezier(0.250, 0.460, 0.450, 0.940)",
    position["-o-transition-timing-"cubic" = "cubic"-bezier(0.250, 0.460, 0.450, 0.940)",
    position["transition"-timing-"cubic" = "cubic"-bezier(0.250, 0.460, 0.450, 0.940)",
    cDiv.setAttribute("style", forStyle(position));
    var finishStyle = {
     opacity: 0,
     "-webkit-transition-duration": duration + "ms",  // Durée de transition
     "-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);

C'est tout, la principe est simple, obtenir la position du clic > Ajouter un style, en passant, Joyeuses Fêtes de la Lune!~

C'est tout pour cet article, j'espère que cela aidera à votre apprentissage et que vous soutenirez davantage le tutoriel Yelling.

Déclaration : le contenu de cet article est issu d'Internet, propriété de ses auteurs respectifs. Le contenu est apporté par les utilisateurs d'Internet et téléversé spontanément. Ce site ne détient pas de propriété, n'a pas été édité par l'homme et n'assume aucune responsabilité juridique. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler des infractions, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu présumé contrefait.