Cubo de imagens animado

      ,       Sem comentários   
Cubo de imagens animado
Olá e bem-vindo ao Mult-focos. Vamos ver neste post como adicionar um cubo de imagens animado no seu blog. Este ornamento em forma de cubo é composto por seis imagens 200x200 pixels e pode ser útil para você destacar imagens em seu blog.
Veja um demo clicando no botão abaixo ou em Result no Box de códigos.

DEMO

Como adicionar no blog
  •  Ir para o painel do blogger->layout 
  • Clique em Adicionar um Gadget. 
  •  Na janela Adicionar um gadget->HTML/JavaScript. 
  •  Copie o código JS abaixo e cole-o dentro da caixa de conteúdo. 
  •  Salvar o gadget. Arraste o gadget e reposicione-o onde você quer mostrá-lo. 
  •  Clique no botão Salve (canto superior direito).
Configurações
  • Copie o código JS e cole em um bloco de notas e faça as modificações em: URL DA IMAGEM. 
  • As imagens são de 200x200 em um total de seis. 
Isto é tudo.

<h1>Cubo de imagens animado Mult-focos</h1>

<div class="cube">
        <div class="loader6"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYitIhyEZ414q0y-_QLV48DCMPmM7OD8EjDmk1n_X9zeniNE3pnTDyNF_DZeTOiYHG8XuvFK0bF3vI6P_zBK39ilJKrFRrtfAutKwbXEfCaEHJCJ8qmj3siUUXBpKSToI9s7plaWHqK-xA/s200-no/aranha.jpg"/></div>
        <div class="loader5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPKlur4Uv_kV_5RIHzQ9bTs3MIbRwGOh-DC3G_TUsHaD5LJWLKrD7OhaurKVGgk_Gk7R4CNuG96Dkcwo6bUYOzjEJS497u4t5reG-BrZtkOn3SXavqM3tALkjDHUpEy1BqgduLWbgkqTnQ/s200-no/Globo.jpg"/></div>
        <div class="loader4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHNyAMZ2poCxvQiklUBO3oeToFIBUJdwzt61l8lGMjtCGkPXqwgNPTfXssquOjZpkQJaVe7CNaJWYzoo89VLi9c77PkVuJZViiPH0Xekj4VxAsOKmbNUxp4vQ5C6VrMYvk1cO8Q8d4LTY-/s200-no/ma%C3%A7%C3%A3.jpg"/></div>
        <div class="loader3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjItvcrIVhBJnTCBCK-Gbj8SyCRD9REo_aKkpsc728W8Irtwia16H9VhGTRE7vLZ0ecABZxA51JI6ecfNxGO67bGkvSuAKCWP5wdWbqDzNnRqFdIc0qFhHRaPAu8BnVsl-Jg983j2_uCgZt/s200-no/morcegos+voando.jpg"/></div>
        <div class="loader2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZsyoRWu3GdkOq14PJrppkNqCjuFrqr6RHq1fHKETMHFuF3x6bOT-3U7ijRMRF78RIVm6ciZd9yIIHBDEGtdPWdKHShbRNNhVTo_KhZoXsIb_7VHkh70DufRHwT5jGaKnJR6FalezN9EB4/s200-no/p%C3%B4r+do+sol.jpg"/></div>
        <div class="loader1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsyqw7yTWaPo0l5S9yMTY7D2gIs9maAcQ5048Oaukc1hOWrA-TjFikB0TxzohNT1gMayX3fHQXpWBogKpiSnqlGHvFOS1DK1uJazLd-nDzOIpMugGfO6WtINOoqem4KYDQzMn5Mrsmg4W4/s200-no/rel%C3%A2mpago.jpg"/></div>
</div>

See the Pen fmdAj by Mairink (@Oemes) on CodePen.




Postado por Mairink Oemes

0 comentários:

Postar um comentário

Todos comentários são lidos e moderados previamente.
São publicados apenas aqueles que respeitarem as regras abaixo:
-Ter relação com o assunto do post.
-Não conter propagandas de outro site ou blog.
-Não incluir links no conteúdo do comentário.
-Se quiser deixar sua URL, comente usando a opção OpenID;
Obrigado(a) por comentar!

free website hit counter