Gadget de seguidores: 2 efectos de opacidad

¡Hola! Qué onda? Yo acá disfrutando del aire acondicionado ya que es pleno verano en mi país, y sí, odio el verano, el calor, el sol -.-. A veces pienso que es un poco agradable, pero en mi país el verano es muy fuerte, se llega a temperaturas cercanas a los 40°, se le suma la humedad {en buenos aires}, los cortes de luz, etc. Pero bueno, la tenemos que pilotear ja. Hoy les traigo un tutorial sobre el efecto que tengo en mi gadget de seguidores, y otro más que sería igual a ese, solo que sin el efecto giratorio. Espero que les sirva, y comencemos con el tutorial <3


Efecto giratorio con opacidad (como el mío)

Tema | Editar HTML | Ctrl + F | y buscas ]]></b:skin>

Arriba de ]]></b:skin> pegas el siguiente código.

#Followers1-wrapper {
opacity: 0.2; -webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease;
-webkit-transition-duration: .90s;
transition-duration: .90s;
margin-bottom: 2px;
}
#Followers1-wrapper:hover {
transform: rotate(360deg) scale(1) skew(1deg) translate(1px);
-webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(1px);
-moz-transform: rotate(360deg) scale(1) skew(1deg) translate(1px);
-o-transform: rotate(360deg) scale(1) skew(1deg) translate(1px);
-ms-transform: rotate(360deg) scale(1) skew(1deg) translate(1px);
text-decoration: none !important;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease; opacity: 1;
-webkit-transition-duration: .90s;
transition-duration: .90s;
margin-bottom: 2px;
}

Efecto opacidad simple (sin efecto giratorio)

Tema | Editar HTML | Ctrl + F | y buscas ]]></b:skin>

Arriba de ]]></b:skin> pegas el siguiente código.

#Followers1-wrapper {
opacity: 0.2; -webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease;
-webkit-transition-duration: .90s;
transition-duration: .90s;
margin-bottom: 2px;
}
#Followers1-wrapper:hover {
text-decoration: none !important;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease; opacity: 1;
-webkit-transition-duration: .90s;
transition-duration: .90s;
margin-bottom: 2px;
}


Bueno, espero que les haya gustado los efectos, si los usan o publican no olviden de darme créditos ñ-ñ
¡Gracias por leer!
-Amary

2 comentarios:

  1. waaa este efecto me gusto mucho!!!!!!!!Gracias!!
    besotes

    ResponderEliminar
  2. Gracias por el tutorial! Espero utilizarlo pronto :)
    Saludos ~

    ResponderEliminar

Comenta con respeto ^-^

¡Gracias por tu comentario!

Emojis:
(∩ω∩) | (>△<) | (>▽<) | (⊙▽⊙) | (╯ω╰) | (☆▽☆) | (≧ω≦) | ≡(▔﹏▔)≡ | ( ̄(エ) ̄) | (・∀・ ) | (ノ◕ヮ◕)ノ*:・゚✧ | (^▽^) | (¬_¬) | ✖‿✖ | (¬‿¬) | (─‿‿─) | (~ ̄▽ ̄)~ | (︶ω︶) | (+_+) | (。♥‿♥。) | (✿ ♥‿♥) | ●ᴥ●

Simbolos:
☺♥♫△☆ღ