TUTORIAL MENU EFEITO PISCA COM CSS

abril 07, 2020

Hoje trago para vocês um efeito bem bacana, que você pode utilizar no seu blog tanto para colocar em submenus ou ate mesmo utiliza-lo para colocar em algum item do seu blog, quer aprender ? so clicar abaixo para continuar.

DEMO

Abra seu editor de HTML do blogger, apertar CTRL + F procure pela seguinte palavra <head> abaixo dela você vai colar um dos códigos abaixo, fiz dois modelos então fica a seu critério qual vai utilizar. (só lembrando que se colocar o codigo de um e depois colocar o de outro, não vai funcionar.EFEITO 1 <link href='http://static.tumblr.com/dlelfro/QJ2mh90b7/pisca2.css' media='screen' rel='stylesheet'/>EFEITO 2 <link href='http://static.tumblr.com/dlelfro/WSvmh91f0/pisca5.css' media='screen' rel='stylesheet'/>
Assim que terminar de colocar o primeiro código, procure pela seguinte palavra ]]></b:skin e logo em seguida cole acima um dos códigos abaixo faça as edições a seu gosto, salve e feche :.efeitopisca1{ padding:2px; border:1px solid #dcdbdb; -webkit-animation-duration: 1.5s; -webkit-transition-duration: .5s; } .efeitopisca1:hover{ -webkit-animation-name: pisca; -moz-animation-name: pisca; -o-animation-name: pisca; animation-name: pisca; border-radius: 10px 0px 10px 0px; -moz-border-radius: 10px 0px 10px 0px; -webkit-border-radius: 10px 0px 10px 0px; -webkit-transition-duration: 1.5s; -webkit-animation-duration: .5s; } .efeitopisca2{ padding:2px; border:1px solid #dcdbdb; -webkit-transition-duration: 1.50s; } .efeitopisca2:hover{ -webkit-animation-name: piscaporra; -moz-animation-name: piscaporra; -o-animation-name: piscaporra; animation-name: piscaporra; -webkit-animation-duration: 1.5s; border:1px solid #e9a124; -webkit-transition-duration: 1.50s; }
Adicione um gadget HTML JAVA SCRIPT e adicione o código abaixo só lembrando que as imagens que utilizei foram de 50x50px você pode usar outros tamanhos também basta apenas substituir a imagem que fiz pela sua, o ideal e hospedar no imgur

Espero que tenham gostado do efeito, lembrando que caso tenha alguma dúvida ou não conseguiu instalar o efeito, deixe nos comentários que vou te ajudar.

Créditos:

CSSmatic, e Stackoverflow

Gust4vo_

Blogueiro e design gráfico desde 2010, buscando sempre trazer conteúdo exclusivo e um blog bacana onde todos possam aprimorar e trocar conhecimento. .

2 comentários

Marisa Cavaleiro9.4.20
Não consegui encontrar essas palavras!!
xoxo

marisasclosetblog.com
ResponderExcluir
Respostas

Adicionar comentário

BGUH

TUTORIAL MENU EFEITO PISCA COM CSS

Gust4vo_

2 comentários

Quem Escreve

ULTIMAS POSTAGENS

BGUH

TUTORIAL MENU EFEITO PISCA COM CSS

Compartilhe

Gust4vo_

Tem dúvida ? Comenta ai.

2 comentários

Quem Escreve

ULTIMAS POSTAGENS