Maintenant que j'ai appris l'effet de transition, j'ai commencé à prendre conscience de faire des effets d'animation, et je réaliserai des gadgets plus éblouissants. L'ajout d'effets d'animation de transition à une page Web rendra les gens beaux, pas raides et auront un bon look. L'animation est l'une des principales manifestations de la beauté d'une page Web. Voici quelques exemples de loterie utilisant des effets de transition à réaliser.
Prenons d'abord les rendus:
Cette implémentation nécessite un code JS.
Images requises:
Cette image est à l'emplacement de Pointer.png.
Turntiable-bg.jpg Cette image est l'image d'arrière-plan, en position d'arrière-plan.
Cette image est dans la plaque tournante.png emplacement.
Ces trois photos sont nécessaires. Si vous souhaitez les implémenter, enregistrez simplement ces trois images et présentez-les dedans. Sinon, veuillez le modifier au nom d'image correspondant et le mettre dans le même fichier.
Code:
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <itle> release lottery </title> <! - Voici la partie CSS -> <style> #bg {width: 650px; Hauteur: 600px; marge: 0 auto; CONTEXTE: URL (Turtonable-Bg.jpg) sans répétition; Position: relative; } img [src ^ = "pointeur"] {position: absolue; Z-Index: 10; En haut: 155px; Gauche: 247px; } img [src ^ = "Turtonnable"] {position: absolue; Z-Index: 5; En haut: 60px; Gauche: 116px; transition: tous les 4; } </ style> </ head> <body> <! - Voici la partie de structure html -> <div id = "bg"> <img src = "pointer.png"> <img src = "Turntable.png"> </div> <! - Voici la partie js -> <cript> var opoter = document.getelementsByTagname (IMG ") [0]; var oTurnntable = document.getElementsByTagName ("img") [1]; var chat = 51,4; var num = 0; var offon = true; document.title = ""; opoter.OnClick = function () {if (offon) {oTurnntable.style.transform = "rotate (0deg)"; offon =! offon; ratation (); }} fonction Rationing () {var timer = null; var rdm = 0; ClearInterval (temporisateur); timer = setInterval (function () {if (math.floor (rdm / 360) <3) {rdm = math.floor (math.random () * 3600);} else {oturnntable.style.transform = "rotate (" + rdm + "deg)"; clearInterval (timer); settimeout (function () {offon =! num = rdm% 360; if (num <= cat * 5) {alert (service sans intérêt "); } </ script> </ body> </html>Il n'y a pas beaucoup de code CSS et HTML, principalement pour atteindre les paramètres de transition, et pour implémenter le positionnement en cascade, de sorte que l'élément est positionné pour obtenir les clics d'éléments et d'événements, et le pointeur de clic tourne donc, vous devez donc ajouter un événement de clic au pointeur, puis déterminer si la rotation s'arrête. S'il n'y a pas de clic, vous ne pouvez pas appeler la fonction ratation (). Cette fonction effectue une rotation de la platine et détermine où le pointeur est arrêté, puis apparaît le contenu correspondant. Le processus de mise en œuvre de la rotation dans la fonction consiste à obtenir les éléments de la plaque tournante, puis à utiliser JS pour contrôler l'attribut du CSS-Transform: Rotate (). N'avons-nous pas utilisé cette propriété pour obtenir directement l'effet de rotation dans CSS? Il est implémenté avec le sélecteur de classe pseudo: des attributs de survol et de transition. Par conséquent, parce que CSS ne peut pas implémenter l'opération de numéro et le clic de la souris, laissez JS implémenter et contrôler l'attribut CSS pour réaliser la fonction de la rotation de clic. Cependant, l'utilisation de la minuterie est sans parler de la minuterie. L'idée est d'utiliser JS pour implémenter l'opération de nombre, le clic de souris et le contrôle d'attribut CSS pour réaliser l'effet de la rotation.
Math.Random () est la génération de nombres aléatoires, et math.floor () tourne vers le bas.
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.