Vor kurzem habe ich einen guten Schaltfläche gesehen, der Klickeffekte auf den Schaltfläche hat. Beim Klicken erzeugte es 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 datoror = "#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;}. Btn {Border: None; Anzeige: Inline-Block; Farbe: weiß; Überlauf: versteckt; Rand: 1Rem; Polsterung: 0; Breite: 150px; Höhe: 40px; Text-Align: Mitte; Zeilenhöhe: 40px; Border-Radius: 5px;}. Btn.Color-1 {Hintergrundfarbe: #426FC5;}. Btn-border.Color-1 {Hintergrundfarbe: transparent; Grenze: 2px fest #426fc5; Farbe: #426fc5;}. Materialdesign {Position: relativ;}. Materialdesign-Leinwand {Opazität: 0,25; Position: absolut; Top: 0; links: 0;}. Container {Align-Content: Mitte; Ausrichtung: Flex-Start; Anzeige: Flex; Flex-Richtung: Reihe; Flex-Wrap: Wrap; Justify-Content: Center; Rand: 0 Auto; Max-Breite: 46rem;}JS -Code:
var canvas = {}, centerX = 0, centerY = 0, color = '', containers = document.getElementsByClassName('material-design') context = {}, element = {}, radius = 0, // Generate requestAnimationFrame animation based on callback requestAnimFrame = function () { return ( window.requestAnimationFrame || Fenster.MoZREQUESTANIMATIONSFRAME ||. } (), // Canves init = function () {container = array.prototype.slice.call (Container); für (var i = 0; i <container.length; i += 1) {canvas = document.createelement ('canvas'); Canvas.AdDeVentListener ('Click', Drücken, false); Container [i] .AppendChild (Leinwand); Canvas.Style.width = '100%'; Canvas.Style.Height = '100%'; canvas.width = canvas.Offsetwidth; canvas.height = canvas.offseteight; }}, // klicken und die erforderlichen Daten abrufen, z. B. Klicken Sie auf Koordinaten, Elementgröße, Farbe Press = Funktion (Ereignis) {color = event.toelement.Parentelement.dataset.color; Element = Ereignis.Toelement; context = element.getContext ('2d'); Radius = 0; CenterX = Event.OffsetX; Centery = Event.Offsety; context.clearRect (0, 0, element.width, element.height); ziehen(); }, // Zeichnen Sie den Kreis und führen Sie die Animation Draw = function () {context.beginPath () aus; context.arc (CenterX, Centery, Radius, 0, 2 * Math.pi, False); context.FillStyle = Farbe; context.fill (); Radius += 2; // Zeichne den Kreis mit dem Radius += 2, indem du beurteilst, 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: Mitte; -Webkit-Tap-Highlight-Color: transparent; Z-Index: 1;}. Wellen .Waves-Animation {Position: absolut; Grenzradius: 50%; Breite: 25px; Höhe: 25px; Deckkraft: 0; Hintergrund: RGBA (255.255.255,0,3); Übergang: Alle 0,7 Sekunden; Übergangs-Property: Transformation, Deckkraft, -Webkit-Transformation; -Webkit-Transformation: Skala (0); Transformation: Skala (0); Zeiger-Events: Keine} .ts-btn {width: 200px; Höhe: 56px; Zeilenhö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; Window.PagexOffset - ele.clientleft}} var show = function (Ereignis) {var pdiv = event.target, CDIV = Dokument.Createelement ('div'); _scale = 'scale (' + pdiv.clientwidth / 100 * 10 + ')'; Position ["-Webkit-transform"] = _Scale, Position ["-Moz-Transform"] = _Scale, Position ["-ms-transform"] = _Scale, Position ["-o-transform"] = _scale, Position.Transform = _Scale, Position.Opacity = "1", Position ["-Webkit-Transformation"] Position ["-Moz-Übergang-Duration"] = Dauer + "MS", Position ["-O-Transition-Duration"] = Dauer + "MS", Position ["-o-transitionsduration"] = Dauer + "MS", Position ["Übergangsdauer"] = Duration + "MS", Position ["-Webkit-transitions-timing-function". 0,940) ", Position ["-Moz-Übergangs-Timing-Funktion "] =" Kubikbezier (0,250, 0,460, 0,450, 0,940) ", Position ["-O-Transition-Timing-Funktion "] =" Cubic-Bezier (0,250, 0,460, 0,450, 0,940, 0,940) ". "Cubic-Bezier (0,250, 0,460, 0,450, 0,940)", Cdiv.Setattribute ("Stil", Forstyle (Position)); Dauer + "MS", "Übergangsdauer": Dauer + "MS", "-Webkit-transform": _Scale, "-moz-transform": _Scale, "-ms-transform CDIV.SetatTribute ("Style", Forstyle (FinishStyle));All dies sind die Prinzipien, und das Prinzip ist einfach. Holen Sie sich den klicken Standort> Style Fügen Sie übrigens hinzu, ein fröhliches Festival im mittleren Autumn ~
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.