Agora que aprendi o efeito de transição, comecei a ter a consciência de fazer efeitos de animação e perceberei alguns gadgets mais deslumbrantes. A adição de efeitos de animação de transição a uma página da Web fará com que as pessoas pareçam bonitas, não rígidas e tenham uma boa aparência. A animação é uma das principais manifestações da beleza de uma página da web. Aqui estão alguns exemplos de loteria usando efeitos de transição para alcançar.
Vamos primeiro fazer as renderizações:
Esta implementação requer algum código JS.
Imagens necessárias:
Esta imagem está no local do ponteiro.png.
toca-tourbable-bg.jpg Esta imagem é a imagem de fundo, na posição de segundo plano.
Esta imagem está no local da plataforma giratória.png.
Essas três fotos são necessárias. Se você deseja implementá -los, salve essas três imagens e apresente -as nele. Caso contrário, modifique -o no nome da imagem correspondente e coloque -o no mesmo arquivo.
Código:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> libere loteria </title> <!-aqui está a parte css-> <yoy> #bg {width: 650px; Altura: 600px; margem: 0 automático; Antecedentes: URL (plataforma giratable-bg.jpg) sem repetição; Posição: relativa; } img [src^= "pointer"] {posição: absoluto; Z-Index: 10; Top: 155px; Esquerda: 247px; } img [src^= "TurnTable"] {Posição: Absolute; Index z: 5; topo: 60px; Esquerda: 116px; Transição: todos os 4s; } </style> </ad Head> <body> <!-Aqui está a parte da estrutura html-> <div id = "bg"> <img src = "pointer.png"> <img src = "turnTable.png"> </div> <!-aqui é a parte js-> <cript> var opinters = Document.Eng ". var oturntable = document.getElementsByTagName ("img") [1]; var gat = 51.4; var num = 0; var offton = true; document.title = ""; Oointer.OnClick = function () {if (offton) {oturntable.style.transform = "girate (0deg)"; offton =! offton; rating (); }} função racionamento () {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 = "rote ("+rdm+"deg)"; num = rdm%360; if (num <= cat*5) {alerta (serviço isento de juros "); } </script> </body> </html>Não há muito código CSS e HTML, principalmente para obter configurações de transição e implementar o posicionamento em cascata; portanto, o elemento é posicionado para obter os cliques de elementos e eventos, e o ponteiro de cliques girará, para que você precise adicionar um evento de clique no ponteiro e, em seguida, determinar se a rotação para. Se não houver clique, você não poderá chamar a função rating (). Esta função executa a rotação da plataforma giratória e determina onde o ponteiro é interrompido e, em seguida, aparece o conteúdo correspondente. O processo de implementação de rotação na função é obter os elementos da plataforma giratória e, em seguida, usar JS para controlar o atributo do CSS-Transform: girtate (). Não usamos essa propriedade para alcançar diretamente o efeito de rotação no CSS? Ele é implementado com o seletor de pseudo-classe: atributos de pairar e transição. Portanto, como o CSS não pode implementar a operação numérica e o clique do mouse, deixe o JS implementar e controlar o atributo CSS para realizar a função da rotação de cliques. No entanto, o uso do cronômetro não deve mencionar o timer. A idéia é usar o JS para implementar a operação numérica, o Mouse Click e o Controle de atributos CSS para obter o efeito da rotação.
Math.Random () é a geração de números aleatórios e as rodadas Math.Floor () para baixo.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.