+ Almentar o tamanho da fonte- Diminuir o tamanho da fonteCompartilharEditar postagemComentar essa postagemLink para esta postagem Deslocar o background com animação

No tutorial anterior, eu ensinei a vocês a mexerem com Animations e keyframes, agora vou mostrar mais ultilidades destas duas propriedades. Talvez você já tenho ido no novo site do Disqus, e reparou que tem uma animação na parte de cima do site, bom, eu vou ensinar você a fazerem esse efeito.

Talvez você queira saber mais sobre animations e keyframes.

Bom, primeiro vá no Google Imagens e ache um background (plano de fundo) para usar (de preferência que se repita como esse e tenha as mesmas prorporções tanto em altura quanto de largura). Agora vá no seu site ou blog e antes da tag </style> no head, cole o código abaixo. Se estiver no Blogger, cole antes de ]]></b:skin> no HTML.

.hYs { -webkit-animation: bgMove 9.9s linear infinite; -moz-animation: bgMove 9.9s linear infinite; -o-animation: bgMove 9.9s linear infinite; -ms-animation: bgMove 9.9s linear infinite; animation: bgMove 9.9s linear infinite; background: url(http://i.istockimg.com/file_thumbview_approve/3781501/2/stock-illustration-3781501-seamless-floral-background-repeat-many-times-vector-illustration.jpg); background-position: 0 0;} @-webkit-keyframes bgMove { 100% {background-position: 100000px -10000px;}} @-moz-keyframes bgMove { 100% {background-position: 100000px -10000px;}} @-o-keyframes bgMove { 100% {background-position: 100000px -10000px;}} @-ms-keyframes bgMove { 100% {background-position: 100000px -10000px;}} @keyframes bgMove { 100% {background-position: 100000px -10000px;}} Entendendo o código:

1. Aonde está "hYs" você coloca a classe que vai receber a animação.
2. Aonde tem "9.9s" é a velocidade da animação (não apague o 's'). obs: troque em todos eles se você quiser mudar.
3. Esse @keyframes é o que faz a animação acontecer. Aprenda mais sobre ele clicando aqui.
4. No background-position, fica os valores do deslocamento do background. Você pode mudar para a largura e a altura da img (Exemplo: 380px -376px - o primeiro é a largura e o segundo é a altura).
5. Você pode adicionar mais styles.

Agora basta salvar e ver como ficou, fácil assim.

Exemplo:

Caso tenha alguma dúvida ou se eu tiver errado alguma coisa, é só comentar.