¡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!
waaa este efecto me gusto mucho!!!!!!!!Gracias!!
ResponderEliminarbesotes
Gracias por el tutorial! Espero utilizarlo pronto :)
ResponderEliminarSaludos ~
yo tambien detesto el verano jej ٩(ˊᗜˋ*)و ♡
ResponderEliminarsomos tal para cual ଘ(੭ˊᵕˋ)੭♡
Eliminar