Hoje, apresentaremos como usar o CSS3 para concluir a animação do Google Doodle. Ao clicar no botão [Iniciar] na página de demonstração, os cavalos e cavalos na página se moverão. http://demo.cuoxin.com/js/2012/googlecss3/">css3/
Uma coisa a enfatizar aqui é que o IE não suporta os atributos de animação do CSS3, e eu reclamo do mal, ou seja, novamente. Mas não podemos usar isso como um motivo para não adotar o CSS3.
Vejamos primeiro o código HTML.
<! Doctype html>
<html>
<head>
<Title> </title>
<link rel = "Stylesheet" type = "text/css" href = "css/google-doodle-animação em css3-without-javascript.css"/>
</head>
<Body>
<div id = "logotipo">
<div>
<img src = "img/muybridge12-hp-v.png"/>
</div>
<Label para = "play_button" id = "play_label"> </celt>
<input type = "caixa de seleção" id = "play_button" name = "play_button"/>
<span id = "play_image">
<img src = "img/muybridge12-hp-p.jpg"/>
</span>
<div> </div>
<div> </div>
<div> </div>
</div>
</body>
</html>
Abaixo estão alguns CSs.
*{margem: 0px; preenchimento: 0px;}
#Logo {Position: relativo;}
.cavalo{
Largura: 469px;
Altura: 54px;
Antecedentes: url ('../ img/muybridge12-hp-f.jpg');
}
.Frame {Posição: Absolute; esquerda: 0; topo: 0; Z-Index: 1;}
#Play_Button {Display: Nenhum;}
#play_label {
Largura: 67px;
Altura: 54px;
exibição: bloco;
Posição: Absoluto;
Esquerda: 201px;
topo: 54px;
Z-Index: 2;
}
#play_image {
Posição: Absoluto;
Esquerda: 201px;
topo: 54px;
Z-Index: 0;
estouro: oculto;
Largura: 68px;
Altura: 55px;
}
#play_image img {
Posição: Absoluto;
Esquerda: 0;
topo: 0;
}
Esta parte do código não é muito difícil, então não vou explicar em detalhes. Os leitores que não são muito sólidos no CSS podem se perguntar como o botão [Iniciar] está posicionado. Você pode ler a posição Atribuindo -se para entender a função específica do absoluto.
Abaixo está o efeito da página concluído pelos códigos HTML e CSS acima.
foto
Vamos introduzir como produzir efeitos de animação. Primeiro, precisamos definir o quadro -chave, que especifica o efeito da animação em diferentes estágios. Você pode aprender mais em http://www.w3schools.com/css3/css3_animations.asp.
Criamos um quadro de chave chamado cavaleiro e precisamos prefixar -webkit- ou -moz- para o Chrome e o Firefox. 0% e 100% Inicie e encerram o código, respectivamente. Você pode adicionar novos casos conforme necessário, como o efeito de animação em 50%.
@-webkit-keyframes haves-ride {
% {posição de fundo: 0 0;}
% {posição de fundo: -804px 0;}
}
@-Moz-Keyframes Horse-ride {
% {posição de fundo: 0 0;}
% {posição de fundo: -804px 0;}
}
Em seguida, adicionaremos o efeito de animação do CSS3 para o cavalo.
#play_button: verificado ~ .horse {
-Webkit-Animação: Etapas de 0,5s de montante (12, final) Infinite;
-webkit-animação-dely: 2.5s;
-Moz-Animação: Etapas de Rides de Cavalo 0,5S (12, Fim) Infinito;
-Moz-Animation-Delay: 2.5s;
Posição de fundo: -2412px 0;
-Webkit-transição: todos os 2.5s cúbicos-bezier (0,550, 0,055, 0,675, 0,190);
-Moz-transição: todos os 2.5s cúbicos-bezier (0,550, 0,055, 0,675, 0,190);
}
Aqui, introduzimos: verificados e ~ ,: verificados são pseudo-classes, referindo-se ao efeito CSS quando #play_button é selecionado e ~ refere-se ao nó irmão de #play_button.
Em seguida, apresentamos os atributos CSS relacionados a .Horse. Na animação, usamos 4 valores, representando: Keyframe (Ride Horse definimos acima), tempo de intervalo de animação, efeito de animação e tempos de execução. Em seguida, definimos o tempo de atraso da animação através do atraso da animação. Defina a animação de transição do plano de fundo, combinando a transição e a posição de fundo.
Por fim, adicionamos efeitos de animação ao botão [Iniciar].
#play_button: verificado ~#play_image img {
Esquerda: -68px;
-Webkit-transição: todos os 0.5s facilidade;
-moz-transição: todos os 0.5s facilidade;
}
Você pode tentar desenvolvê -lo sozinho.
Endereço para download de demonstração: Google-doodle-animação em css3-without-javascript.zip hoje, apresentaremos como usar o CSS3 para concluir a animação do Google Doodle. Quando você clica no botão [Iniciar] na página de demonstração, os cavalos e cavalos da página se movem, http://www.mycookingroom.com/demo/google-doodle-animation-in-css3-without-javascript.html.
Uma coisa a enfatizar aqui é que o IE não suporta os atributos de animação do CSS3, e eu reclamo do mal, ou seja, novamente. Mas não podemos usar isso como um motivo para não adotar o CSS3.
Vejamos primeiro o código HTML.
<! Doctype html>
<html>
<head>
<Title> </title>
<link rel = "Stylesheet" type = "text/css" href = "css/google-doodle-animação em css3-without-javascript.css"/>
</head>
<Body>
<div id = "logotipo">
<div>
<img src = "img/muybridge12-hp-v.png"/>
</div>
<Label para = "play_button" id = "play_label"> </celt>
<input type = "caixa de seleção" id = "play_button" name = "play_button"/>
<span id = "play_image">
<img src = "img/muybridge12-hp-p.jpg"/>
</span>
<div> </div>
<div> </div>
<div> </div>
</div>
</body>
</html>
Abaixo estão alguns CSs.
*{margem: 0px; preenchimento: 0px;}
#Logo {Position: relativo;}
.cavalo{
Largura: 469px;
Altura: 54px;
Antecedentes: url ('../ img/muybridge12-hp-f.jpg');
}
.Frame {Posição: Absolute; esquerda: 0; topo: 0; Z-Index: 1;}
#Play_Button {Display: Nenhum;}
#play_label {
Largura: 67px;
Altura: 54px;
exibição: bloco;
Posição: Absoluto;
Esquerda: 201px;
topo: 54px;
Z-Index: 2;
}
#play_image {
Posição: Absoluto;
Esquerda: 201px;
topo: 54px;
Z-Index: 0;
estouro: oculto;
Largura: 68px;
Altura: 55px;
}
#play_image img {
Posição: Absoluto;
Esquerda: 0;
topo: 0;
}
Esta parte do código não é muito difícil, então não vou explicar em detalhes. Os leitores que não são muito sólidos no CSS podem se perguntar como o botão [Iniciar] está posicionado. Você pode ler a posição Atribuindo -se para entender a função específica do absoluto.
Abaixo está o efeito da página concluído pelos códigos HTML e CSS acima.
foto
Vamos introduzir como produzir efeitos de animação. Primeiro, precisamos definir o quadro -chave, que especifica o efeito da animação em diferentes estágios. Você pode aprender mais em http://www.w3schools.com/css3/css3_animations.asp.
Criamos um quadro de chave chamado cavaleiro e precisamos prefixar -webkit- ou -moz- para o Chrome e o Firefox. 0% e 100% Inicie e encerram o código, respectivamente. Você pode adicionar novos casos conforme necessário, como o efeito de animação em 50%.
@-webkit-keyframes haves-ride {
% {posição de fundo: 0 0;}
% {posição de fundo: -804px 0;}
}
@-Moz-Keyframes Horse-ride {
% {posição de fundo: 0 0;}
% {posição de fundo: -804px 0;}
}
Em seguida, adicionaremos o efeito de animação do CSS3 para o cavalo.
#play_button: verificado ~ .horse {
-Webkit-Animação: Etapas de 0,5s de montante (12, final) Infinite;
-webkit-animação-dely: 2.5s;
-Moz-Animação: Etapas de Rides de Cavalo 0,5S (12, Fim) Infinito;
-Moz-Animation-Delay: 2.5s;
Posição de fundo: -2412px 0;
-Webkit-transição: todos os 2.5s cúbicos-bezier (0,550, 0,055, 0,675, 0,190);
-Moz-transição: todos os 2.5s cúbicos-bezier (0,550, 0,055, 0,675, 0,190);
}
Aqui, introduzimos: verificados e ~ ,: verificados são pseudo-classes, referindo-se ao efeito CSS quando #play_button é selecionado e ~ refere-se ao nó irmão de #play_button.
Em seguida, apresentamos os atributos CSS relacionados a .Horse. Na animação, usamos 4 valores, representando: Keyframe (Ride Horse definimos acima), tempo de intervalo de animação, efeito de animação e tempos de execução. Em seguida, definimos o tempo de atraso da animação através do atraso da animação. Defina a animação de transição do plano de fundo, combinando a transição e a posição de fundo.
Por fim, adicionamos efeitos de animação ao botão [Iniciar].
#play_button: verificado ~#play_image img {
Esquerda: -68px;
-Webkit-transição: todos os 0.5s facilidade;
-moz-transição: todos os 0.5s facilidade;
}
Você pode tentar desenvolvê -lo sozinho.
Endereço para download de demonstração: http://xiazai.cuoxin.com/201212/yuanma/googlecss3_jb51.rar