Vor kurzem habe ich einen guten Schaltfläche gesehen, der Klickeffekte auf den Schaltfläche hat. Beim Klicken erzeugte es eine Wasserwelle und einen Welleneffekt. Es hat ziemlich viel Spaß gemacht, also habe ich es einfach implementiert (ohne das Kompatibilitätsproblem von Browsern mit niedrigerer Version).
Schauen wir uns zuerst den Effekt an, wie in der folgenden Abbildung gezeigt (die Aufzeichnung der GIF -Software ist etwas schlecht. Es sieht so aus, als wäre es Verrücktheit ...)
Dieser Effekt kann durch verschachtelte Canves innerhalb von Elementen oder durch CSS3 implementiert werden.
Canves -Implementierung
Eine Kopie des von Canves implementierten Code wird online ausgewählt, einige doppelte Definitionsstile leicht entfernt und JS -Kommentare gegeben. Der Code ist wie folgt
HTML -Code
<a daten-color = "#2F5398"> Drücken Sie mich! </a>
CSS -Code
* {Boxgröße: Border-Box; Umriss: Keine;} Körper {Schriftfamilie: 'Öffnen sans'; Schriftgröße: 100%; Schriftgewicht: 300; Linienhöhe: 1,5EM; Text-Align: Mitte;}. 40px; Text-Align: Mitte; Linienhöhe: 40px; Border-Radius: 5px;}. Btn.Color-1 {Hintergrundfarbe: #426fc5;}. Btn-border.color-1 {Hintergrundfarbe: transparent; Border: 2px solid #426fc5; farb: #426fc5; relativ;}. Materialdesign-Leinwand {Opazität: 0,25; Position: absolut; top: 0;JS -Code
var canvas = {}, Centerx = 0, Centery = 0, Color = '', Containers = document.getElementsByClassName ('Materialdesign') context = {}, element = {}, radius = 0, // Anrequenzantriebsfrüchte basierend auf Callback-AnforderungenanimfRame = function () {) return (Windows.requestanimationFrame. ||. 1) {canvas = document.createelement ('canvas'); canvas.addeventListener ('click', press, false); Container [i] .AppendChild (canvas); canvas.style.width = '100%'; canvas.style.height = '100%'; Canvasvasvasvasvasvasvasvasvasvasvas. canvas.offseteight;}}, // klicken und die erforderlichen Daten abrufen, wie z. B. Klick -Koordinaten, Elementgröße, Color Press = Funktion (Ereignis) {color = event.telement.Parentelement.dataset.Color; Element = Ereignis.Toelement; context = element.getContext ('2dius); radius = 0; Ereignis.Offsety; context.clearrect (0, 0, Element.width, Element.Height); Draw ();}, // Den Kreis zeichnen und die Animation Draw = function () {context.beginPath (); context.arc (Centerx, Zentrum, Radius, 0, 2 * math. Zeichnen Sie den Kreis mit dem Radius += 2, indem Sie beurteilen, dass der Radius kleiner als die Breite des Elements ist, den Kreis ständig mit Radius += 2 if (Radius <Element.width) {Requestanimframe (Draw);}}; init ();CSS3 -Implementierung
Als nächstes ist der Code, der rein handgefertigt ist ... Ich denke, es ist bequemer, CSS3 zu implementieren. Vielleicht bin ich es gewohnt, CSS zu schreiben ...
HTML -Code
<a> Drücken Sie mich! </a>
CSS -Code
.waves {Position: relativ; Cursor: Zeiger; Anzeige: Inline-Block; Überlauf: versteckt; Text-Align: Center; -Webkit-Tap-Highlight-Color: transparent; Z-Index: 1;}. -Webkit-transform; -Webkit-Transform: Skala (0); Transform: Skala (0); Pointer-Events: None} .ts-Btn {width: 200px; Höhe: 56px; Linienhöhe: 56px; Hintergrund: #f57035; Farbe: #FFF; Border-Radius: 5px;};JS -Code
document.adDeVentListener ('domcontentLoded', function () {var duration = 750; // Style String Patchwork var forstyle = function (Position) {var csStr = ''; für (var key in Position) {if (Position.hasownProperty (Schlüssel)) csStr+= key+':'++'+'; Mausklick -Position var forRect = function (Ziel) {var Position = {top: 0, links: 0}, ele = document.documentElement; 'undefined'! = typeof target. window.pagexOffset - ele.clientleft}} var show = function (Ereignis) {var pdiv = event.target, cdiv = document.createelement ('div'); rectobj.left, _scale = 'scale (' + pdiv.clientwidth / 100 * 10 + ')'; var Position = {top: _Height + 'px', links: _left + 'px'}; Forstyle (Position)), Position ["-Webkit-Transformation"] = _Scale, Position ["-Moz-Transform"] = _Scale, Position ["-Moz-transform"] = _scale, Position ["-ms-transform "1",position["-webkit-transition-duration"] = duration + "ms",position["-moz-transition-duration"] = duration + "ms",position["-o-transition-duration"] = duration + "ms",position["-webkit-transition-timing-function"] = 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 [" Übergangs-Timing-Funktion "] =" Cubic-Bezier (0,250, 0,460, 0,450, 0,940) ", cdiv.setattribute (" Stil ", Forstyle (Position)); time"-moz-transition-duration": duration + "ms","-o-transition-duration": duration + "ms","-webkit-transform": duration + "ms","-webkit-transform": _scale,"-moz-transform": _scale,"-ms-transform": _scale,"-o-transform": _scale,"-o-transform": _scale, "-o-transform": _scale, "-scale,"-o-transform ": _scale,"-scale, "-obere: _height +" px ", links: _left +" px ",}; setTimeout (function () {cdiv.setatTribute (" style "," style ",}; ForStyle (FinishStyle)); setTimeout (function () {pdiv.removechild (CDIV);}, Dauer);}, 100)} document.querySelector ('. Wellen'). AddEventListener ('Click', Funktion (e) {show (e);},},},},},},},},},},},! 1); 1); 1); 1); 1); 1); 1); 1);OK, das ist alles übrigens ein fröhliches Festival im mittleren Autumn ~