Ahora que he aprendido el efecto de transición, he comenzado a tener la conciencia de hacer efectos de animación, y me daré cuenta de algunos dispositivos más deslumbrantes. Agregar efectos de animación de transición a una página web hará que las personas se vean hermosas, no rígidas, y lo miren bien. La animación es una de las principales manifestaciones de la belleza de una página web. Aquí hay algunos ejemplos de lotería utilizando efectos de transición para lograr.
Primero tomemos las representaciones:
Esta implementación requiere algún código JS.
Fotos requeridas:
Esta imagen está en la ubicación de Pointer.png.
Turntable-bg.jpg Esta imagen es la imagen de fondo, en la posición de fondo.
Esta imagen está en la ubicación del plato giratorio.
Estas tres imágenes son necesarias. Si desea implementarlas, simplemente guarde estas tres imágenes y preséntelas en ellas. Si no, modifíquelo al nombre de la imagen correspondiente y póngalo en el mismo archivo.
Código:
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> lotería de lanzamiento </title> <!-Aquí está la parte CSS-> <style> #bg {width: 650px; Altura: 600px; margen: 0 auto; Antecedentes: URL (Turntable-Bg.jpg) No-Repeat; Posición: relativo; } img [src^= "puntero"] {posición: absoluto; Índice Z: 10; Arriba: 155px; Izquierda: 247px; } img [src^= "Turntable"] {Position: Absolute; índice z: 5; Arriba: 60px; Izquierda: 116px; Transición: todos 4s; } </style> </head> <body> <!-Aquí está la parte de la estructura html-> <div id = "bg"> <img src = "pointer.png"> <img src = "turntable.png"> </div> <!-aquí está la parte js-> <script> var opointer = document.getElementsbytagName ("IMG") ["0] [0]; 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; rating (); }} function rationing () {var timer = null; var rdm = 0; ClearInterval (temporizador); timer = setInterval (function () {if (math.floor (rdm/360) <3) {rdm = math.floor (math.random ()*3600);} else {oTurnTable.style.transform = "Rotate ("+rdm+"deg)"; Clearinterval (timer); setTimeut (function () {—Effon = num = rdm%360; if (num <= cat*5) {alerta ("servicio sin intereses"); } </script> </body> </html>No hay mucho código CSS y HTML, principalmente para lograr la configuración de transición, e implementar el posicionamiento en cascada, por lo que el elemento está posicionado para obtener los clics de elementos y eventos, y el puntero de clics girará, por lo que debe agregar un evento de clic al puntero, y luego determinar si la rotación se detiene. Si no hay clic, no puede llamar a la función Rating (). Esta función realiza la rotación del plato giratorio y determina dónde se detiene el puntero, y luego aumenta el contenido correspondiente. El proceso de implementación de rotación en la función es obtener los elementos del plato giratorio y luego usar JS para controlar el atributo de la transformación CSS: ROTATE (). ¿No hemos usado esta propiedad para lograr directamente el efecto de rotación en CSS? Se implementa con el selector de pseudo-clase: los atributos de transición y desplazamiento. Por lo tanto, debido a que CSS no puede implementar la operación numérica y el clic del mouse, permita que JS implementa y controle el atributo CSS para realizar la función de la rotación de clics. Sin embargo, el uso del temporizador no debe mencionar el temporizador. La idea es usar JS para implementar la operación numérica, el clic del mouse y el control de atributos CSS para lograr el efecto de la rotación.
Math.random () es la generación de números aleatorios, y Math.floor () redondea hacia abajo.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.