Récemment, j'ai vu un bon effet de clic de bouton. En cliquant, il a produit un effet d'ondulation. 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; Aperçu: Aucun;} corps {Font-Family: 'Open Sans'; taille de police: 100%; Police-poids: 300; hauteur de ligne: 1.5EM; Text-Align: Center;}. Btn {Border: Aucun; Affichage: bloc en ligne; Couleur: blanc; débordement: caché; marge: 1rem; rembourrage: 0; Largeur: 150px; hauteur: 40px; Texte-aligne: Centre; hauteur de ligne: 40px; Border-Radius: 5px;}. btn.color-1 {background-Color: # 426fc5;}. btn-border.color-1 {background-Color: transparent; Border: 2px solide # 426fc5; Couleur: # 426fc5;}. Material-Design {position: relative;}. Canvas de conception de matériau {opacité: 0,25; Position: absolue; en haut: 0; gauche: 0;}. Container {Align-Content: Center; Align-Items: Flex-Start; Affichage: flex; Direction flexible: ligne; wrap flex: enveloppement; Justification-contenu: centre; marge: 0 auto; largeur max: 46rem;}Code js:
var canvas = {}, CenterX = 0, Centery = 0, Color = '', conteneurs = document.getElementsByClassName ('Material-Design') context = {}, élément = {}, radius = 0, // Guilleate RequestanimationFrame Animation basé sur Callback DemandeanImFrame = funder () {return.requestanimation || Windows.OrequestanimationFrame || } (), // Générer des canettes init = function () {conteneurs = array.prototype.slice.call (conteneurs); pour (var i = 0; i <conteneurs.length; i + = 1) {canvas = document.createElement ('canvas'); canvas.addeventListener ('click', appuyer, false); conteneurs [i] .APPEndChild (toile); canvas.style.width = '100%'; canvas.style.height = '100%'; canvas.width = canvas.offsetwidth; Canvas.Height = 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 couleur = fonction (événement) {color = event.toelement.parerentelement.dataset.color; element = event.toelement; context = element.getContext ('2d'); rayon = 0; CentreX = event.offsetx; CENTERE = EVENT.Offsety; context.clearrect (0, 0, élément.width, element.height); dessiner(); }, // dessiner le cercle et exécuter l'animation draw = function () {context.beginPath (); context.arc (CenterX, Centery, Radius, 0, 2 * Math.pi, false); context.fillStyle = couleur; context.fill (); rayon + = 2; // dessine le cercle avec le rayon + = 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 <élément.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: Centre; -Webkit-Tap-Highlight-Color: transparent; z-index: 1;}. waves .waves-animation {position: absolu; Border-Radius: 50%; Largeur: 25px; hauteur: 25px; Opacité: 0; Contexte: RGBA (255 255 255,0,3); Transition: toutes les 0,7 s facilitant la facilité; transition-property: transform, opacité, -webkit-transform; -Webkit-transform: échelle (0); transformée: échelle (0); Pointer-Events: Aucun} .ts-btn {width: 200px; hauteur: 56px; hauteur de ligne: 56px; Contexte: # 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 = fonction (Target) {var Position = {top: 0, gauche: 0}, ele = document.DocumentElement; 'Undefined'! = Typeof Target.getBoundingClientRect && (position. ele.clientleft}} var show = function (event) {var pdiv = event.target, caliv = document.createElement ('div'); 'Scale (' + pdiv.clientwidth / 100 * 10 + ')'; _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-Durée"] = Durée + "MS", position ["- O-Transition-Durée"] = Durée + "MS", position ["Transition-Duration"] = Durée + "MS", position ["- WebKit-Transition-Timing-Function, 0.940)", Cubic-Bezier (0,250, 0,460, 0,450, 0,940) ",,",, ",,", 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-Iming-Fonction"] = "Cubic-Bezier (0,250, 0,460, 0,450, 0,940)", "." Transition-timfing-function "] =" Cubic-Bezer (0.250, transition-timing-function "] =" Cubic-Bezer (0.250, transition-timing-function "] =" cubic-boelier (0.250, transition-timing-function "] =" cubic-boelier (0.250, transition-timing-function "] =" Cubic-Bezer (0.250, transition-timing-function "] =" Cubic-Boe (0.250 0,460, 0,450, 0,940) ", CDIV.SetAttribute (" Style ", Forstyle (position)); var finalStyle = {Opacity: 0," -Webkit-Transition-Durée ": Durée +" MS " Durée + "MS", "-webkit-transform": _scale, "-moz-transform": _scale, "-ms-transform": _scale, "-o-transform": _scale, top: _Height + "px", left: _left + "px",}; FORSTYLE (finitionStyle);Tous ce sont les principes et le principe est simple. Obtenez l'emplacement de clic> Ajouter du style au fait, joyeux festival de mi-automne ~
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.