Boas pessoal, hoje vou mostrar alguns exemplos de animações CSS que se podem fazer com um código disponibilizado por Daniel Eden. É de facto uma "biblioteca" fantástica, o código é um pouco grande, contudo acho que vale a pena experimentar em nossos blogues. Este pack possui cerca de 73 exemplos diferentes de animações, eu vou colocar aqui algumas e numa outra postagem as restantes.
Em primeiro lugar apresento-vos o código:
Eu avisei que era grande!!!
Para colocar o código no blogger, vamos a modelo --> Editar HTML, pressionamos CTRL+F e pesquisamos por ]]></b:skin>
Antes do trecho pesquisados colocamos o código.
Neste código, temos dois tipos de classes:
- A classe do efeito;
- A classe que faz com que o efeito seja contínuo, ou seja, infinito;
Como disse anteriormente existem 73 efeitos, as classes deles são:
- bounce
- flash
- pulse
- rubberBand
- shake
- swing
- tada
- wobble
- bounceIn
- bounceInDown
- bounceInLeft
- bounceInRight
- bounceInUp
- bounceOut
- bounceOutDown
- bounceOutLeft
- bounceOutRight
- bounceOutUp
- fadeIn
- fadeInDown
- fadeInDownBig
- fadeInLeft
- fadeInLeftBig
- fadeInRight
- fadeInRightBig
- fadeInUp
- fadeInUpBig
- fadeOut
- fadeOutDown
- fadeOutDownBig
- fadeOutLeft
- fadeOutLeftBig
- fadeOutRight
- fadeOutRightBig
- fadeOutUp
- fadeOutUpBig
- flipInX
- flipInY
- flipOutX
- flipOutY
- lightSpeedIn
- lightSpeedOut
- rotateIn
- rotateInDownLeft
- rotateInDownRight
- rotateInUpLeft
- rotateInUpRight
- rotateOut
- rotateOutDownLeft
- rotateOutDownRight
- rotateOutUpLeft
- rotateOutUpRight
- hinge
- rollIn
- rollOut
- zoomIn
- zoomInDown
- zoomInLeft
- zoomInRight
- zoomInUp
- zoomOut
- zoomOutDown
- zoomOutLeft
- zoomOutRight
- zoomOutUp
- slideInDown
- slideInLeft
- slideInRight
- slideInUp
- slideOutDown
- slideOutLeft
- slideOutRight
- slideOutUp
E a classe infinito é infinite
Agora, vamos montar o código:
<div class='animated bounce'>Uncomplicated Works </div>
Efeito:
Uncomplicated Works
Onde está a vermelho substituímos pelo efeito desejado de entre os 73 possíveis;
Onde está sublinhado a amarelo substituímos pelo texto desejado.
Usando a classe Infinite
<div class='animated infinite bounce'>Uncomplicated Works </div>
Efeito:
Onde está a vermelho substituímos pelo efeito desejado de entre os 73 possíveis;
Onde está sublinhado a amarelo substituímos pelo texto desejado.
Usando a classe Infinite
<div class='animated infinite bounce'>Uncomplicated Works </div>
Efeito:
Uncomplicated Works
- Flash
<div class='animated infinite flash'>Uncomplicated Works </div>
Uncomplicated Works
- Pulse
<div class='animated infinite pulse'>Uncomplicated Works </div>
Uncomplicated Works
- RubberBand
<div class='animated infinite rubberBand'>Uncomplicated Works </div>
Uncomplicated Works
- Shake
<div class='animated infinite shake'>Uncomplicated Works </div>
Uncomplicated Works
- Swing
<div class='animated infinite swing'>Uncomplicated Works </div>
Uncomplicated Works
- Tada
<div class='animated infinite tada'>Uncomplicated Works </div>
Uncomplicated Works
- Wobble
<div class='animated infinite wobble'>Uncomplicated Works </div>
Uncomplicated Works
- BounceIn
<div class='animated infinite bounceIn'>Uncomplicated Works </div>
Uncomplicated Works
Bem, visto que são inúmeros efeitos em breve vou colocar uma caixa geradora de código para cada efeito, experimentem os restantes efeitos eu vou tentar colocar tudo brevemente. Espero que tenham gostado do tutorial Animações CSS
Sem comentários:
Enviar um comentário