Récemment, j'ai vu un bon effet de clic de bouton. En cliquant, il a produit un effet d'onde d'eau et d'ondulations. C'était assez amusant, donc je l'ai simplement implémenté (sans considérer le problème de compatibilité des navigateurs de version inférieure)
Jetons un coup d'œil à l'effet d'abord, comme le montre la figure ci-dessous (l'enregistrement du logiciel GIF est un peu mauvais, il semble que ce soit Crazi ...)
Cet effet peut être mis en œuvre par des canettes imbriquées à l'intérieur des éléments ou par CSS3.
Implémentation des canettes
Une copie du code implémentée par les canettes est choisie en ligne, légèrement supprimé certains styles de définition en double et a donné des commentaires à JS. Le code est le suivant
code html
<a data-color = "# 2f5398"> Appuyez sur moi! </a>
Code CSS
* {Box-Size: Border-Box; contour: Aucun;} Body {Font-Family: 'Open Sans'; Font-Size: 100%; Font-Weight: 300; Line-Height: 1.5EM; Text-Align: Center;}. Btn {Border: Aucun; Affichage: Block en ligne; Couleur: White; Sortie: Mice; Marge: 1Rem; Padding: 0; 40px; Text-Align: Center; Line-Height: 40px; Border-Radius: 5px;}. Btn.Color-1 {Background-Color: # 426FC5;}. relatif;}. Canvas de conception de matériau {opacité: 0,25; position: absolu; en haut: 0; gauche: 0;}. Container {align-content: Center; Align-Items: flex-start; Affichage: Flex; flex-direction: row; flex-wrap: wrap; justify-contem: Center; margin: 0 auto; max-width: 46rem;};Code JS
var canvas = {}, CenterX = 0, Centery = 0, Color = '', conteneurs = document.getElementsByClassName ('Material-Design') context = {}, élément = {}, radius = 0, // générer de demandeanimationframe basé sur le callback requestanimFrame = function () {return.requestanimationframe | window.OrequestanimationFrame || window.msRequestanimationFrame || function (callback) {window.setTimeout (Callback, 1000/60);});});} () {canvas = document.CreateElement ('Canvas'); canvas.addeventListener ('click', appuyer, false); conteneurs [i] .appendChild (canvas); canvas.style.width = '100%'; canvas.style.height = '100%'; canvas.width = canevas.offsetwidthy; canvas.offsetheight;}}, // cliquez et obtenez les données requises, telles que les coordonnées de clic, la taille de l'élément, la couleur de la couleur = fonction (event) {color = event.toelement.pare-engel.dataset.color; élément = event.toElement; context = element.getContex event.offsety; context.ClearRect (0, 0, élément.width, élément.height); draw ();}, // dessiner le cercle et exécuter l'animation Draw = function () {context.beginpath (); context.arc (Centrex, Centery, Radius, 0, 2 * Math.pi, false); context.fillstyle = Colory; Contexte. RADIUS + = 2 En jugeant que le rayon est plus petit que la largeur de l'élément, dessinez constamment le cercle avec le rayon + = 2 if (rayon <element.width) {requestanImFrame (draw);}}; init ();Implémentation CSS3
Vient ensuite le code qui est purement fait à la main ... Je pense qu'il est plus pratique d'implémenter CSS3, peut-être que j'ai l'habitude d'écrire CSS ...
code html
<a> Appuyez sur moi! </a>
Code CSS
.Waves {position: relative; curseur: pointeur; affichage: bloc en ligne; débordement: caché; texte-aligne: 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: échelle (0); transform: échelle (0); events de pointeur: aucun} .ts-btn {width: 200px; hauteur: 56px; line-height: 56px; fond: # f57035; couleur: #fff; border-radius: 5px;}Code JS
Document.AddeventListener ('DomConTentloaded', function () {var durée = 750; // Style String Patchwork var Forstyle = function (position) {var cssstr = ''; for (var key in position) {if (position.hasownproperty (key)) CSSStr + = key + ':' + position] + '; Cliquez sur position var forrect = function (cible) {var position = {top: 0, gauche: 0}, ele = document.DocumentElement; 'undefined'! = typeof cible.GetBoundingClientRect && (position = cible.GetBoundingClientRect ()); return {top: position.top + window.pageyoffset-ele.clienttop, gauche: gauche.left. 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 - rECTOBJJ.Lef 'Scale (' + pdiv.clientwidth / 100 * 10 + ')'; var position = {top: _height + 'px', gauche: _left + 'px'}; cdiv.classname = cdiv.classname + "waves-animation", caliv.setAtTrribute ("style", ForStyle (position _scale, position ["- moz-transform"] = _scale, position ["- moz-transform"] = _scale, position ["- ms-transform"] = _scale, position ["- o-transform"] = _scale, position.transform = _scale, position.opacity = "1", position ["- WebKit-transition-dature"] = "MS", position ["- moz-transition-durée"] = durée + "ms", position ["- o-transition-durée"] = durée + "ms", position ["- webkit-transition-timing-finction"] = durée + "ms", position ["- webkit-transition-timing-finction"]] = "cubic-bezier (0,250, 0,460, 0,450," 0,940) ", position [" - moz-transition-timing-fonction "] =" 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 Francing "] = = = = = = = = = = = transition de transition" "Cubic-Bezier (0,250, 0,460, 0,450, 0,940)", CDIV.SetAttribute ("Style", Forstyle (position)); var FinishStyle = {Opacity: 0, "- Webkit-transition-durée": Durée + "MS" "MS", "- Webkit-transform": durée + "MS", "- Webkit-transform": _scale, "- Moz-transform": _scale, "- ms-transform": _scale, "- O-transform _Scale, "- Scale," - Top: _Height + "PX", gauche: _left + "px",}; setTimeout (function () {CDIV.SetAttribute ("style", Forstyle (FinishStyle)); setTimeOut (function () {pdiv.removechild (cdiv);}, durée);}, 100)} document.QuerySelector ('. Waves'). AddeventListener ('click', function (e) {show (e);},! 1);},! 1));Ok, c'est tout, au fait, joyeux festival de mi-automne ~