Jetzt, da ich den Übergangseffekt gelernt habe, habe ich begonnen, das Bewusstsein für Animationseffekte zu sensibilisieren, und ich werde einige schillernde Geräte erkennen. Durch das Hinzufügen von Übergangsanimationseffekten zu einer Webseite werden die Menschen schön, nicht steif aussehen und einen guten Blick darauf werfen. Animation ist eine der Hauptmanifestationen der Schönheit einer Webseite. Hier sind einige Beispiele für Lotterie mit Übergangseffekten, um zu erreichen.
Nehmen wir zunächst die Renderings:
Diese Implementierung erfordert einen JS -Code.
Erforderliche Bilder:
Dieses Bild befindet sich am Ort von Zeiger.png.
Turntable-Bg.jpg Dieses Bild ist das Hintergrundbild in der Hintergrundposition.
Dieses Bild befindet sich am Ort der Plattentable.png.
Diese drei Bilder werden benötigt. Wenn Sie sie implementieren möchten, speichern Sie diese drei Bilder einfach und stellen Sie sie in sie ein. Wenn nicht, ändern Sie es bitte in den entsprechenden Bildnamen und geben Sie ihn in dieselbe Datei ein.
Code:
<! DocType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <title> Release Lottery </title> <!-Hier ist der CSS-Teil-> <style> #bg {width: 650px; Höhe: 600px; Rand: 0 Auto; Hintergrund: URL (Turntable-Bg.jpg) No-Repeat; Position: Relativ; } img [src^= "pointer"] {Position: absolut; Z-Index: 10; Top: 155px; links: 247px; } img [src^= "turntable"] {Position: absolut; Z-Index: 5; Oben: 60px; links: 116px; Übergang: alle 4s; } </style> </head> <body> <!-Hier ist der HTML-Strukturpart-> <div id = "bg"> <img src = "pointer.png"> <img src = "turntable.png"> </div> <! var oturnTable = document.getElementsByTagName ("img") [1]; var cat = 51,4; var num = 0; var offon = true; document.title = ""; opointer.onclick = function () {if (offon) {oturnTable.style.transform = "rotate (0deg)"; Offon =! Offon; Ratating (); }} Funktion rationing () {var timer = null; var rdm = 0; ClearInterval (Timer); timer = setInterval (function () {if (math.floor (rdm/360) <3) {rdm = math.floor (math.random ()*3600);} else {oturnTable.Style.Transform = "rotate ("+rdm+"Degel = clearinterval (Timer); num = rdm%360; if (num <= cat*5) {alert ("Interessenfreier Service"); } </script> </body> </html>Es gibt nicht viel CSS- und HTML -Code, hauptsächlich, um Übergangseinstellungen zu erzielen, und um die Kaskadenpositionierung zu implementieren. Daher wird das Element positioniert, um die Klicks von Elementen und Ereignissen zu erhalten. Der Klickzeiger dreht sich. Wenn kein Klick vorhanden ist, können Sie die Funktionsbewertung () nicht aufrufen. Diese Funktion führt eine Drehung des Plattenspieler durch und bestimmt, wo der Zeiger gestoppt wird, und taucht dann den entsprechenden Inhalt auf. Der Prozess der Implementierung der Rotation in der Funktion besteht darin, die Elemente des Plattenspieler zu erhalten und dann JS zu verwenden, um das Attribut der CSS-Transformation zu steuern: rotate (). Haben wir diese Eigenschaft nicht verwendet, um den Rotationseffekt in CSS direkt zu erreichen? Es wird mit dem Selektor der Pseudo-Klasse implementiert: Schwebe- und Übergangsattribute. Da CSS den Nummernoperation und den Mausklick nicht implementieren kann, lassen Sie JS das CSS -Attribut implementieren und steuern, um die Funktion der Klickdrehung zu realisieren. Die Verwendung des Timers ist jedoch nicht zu schweigen von dem Timer. Die Idee ist, JS zu verwenden, um den Nummernbetrieb, den Mausklick und die CSS -Attributregelung zu implementieren, um den Effekt der Rotation zu erreichen.
Math.random () ist die Erzeugung von Zufallszahlen, und Math.Floor () rundet nach unten.
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.