Algunos efectos 'hover' con animaciones | Oloblogger ¿Quieres decorar tus enlaces de texto para que reaccionen al pasar el puntero por encima de ellos, c...

10 de enero de 2017

Algunos efectos 'hover' con animaciones

¿Quieres decorar tus enlaces de texto para que reaccionen al pasar el puntero por encima de ellos, con líneas, pero de una forma distinta al simple subrayado fijo?

Bien, pues entonces puedes seguir leyendo y quizás alguno de los que se muestran a continuación te podría interesar para todos tus enlaces o para algunos en particular. Tras cada ejemplo se detalla el código CSS que te permitirá animarlos -en todas las acepciones de la palabra- de esa manera.

Como ya va siendo costumbre también podéis experimentar con estos mismos códigos en Codepen y al final del post encontraréis una pequeña explicación adicional para los más torpes (BPT).



a {
position: relative;
overflow: hidden;
display: inline-block;
text-decoration: none;
color: #333;
}
a:after {
content: "";
position: absolute;
bottom: 0;
left: -100%;
width: 100%;
height: 2px;
background: #333;
transition: left .8s;
}
a:hover:after {
left: 0;
}

a {
position: relative;
overflow: hidden;
display: inline-block;
text-decoration: none;
color: #333;
}
a:after {
content: "";
position: absolute;
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: #333;
transition: right .8s;
}
a:hover:after {
right: 0;
}

a {
position: relative;
overflow: hidden;
display: inline-block;
text-decoration: none;
color: #333;
}
a:before,
a:after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: #333;
transition: left .8s;
}
a:hover:before {
left: 0;
}
a:after {
top: auto;
bottom: 0;
left: auto;
right: -100%;
background: #333;
transition: right .8s;
}
a:hover:after {
right: 0;
}

a {
display: inline-block;
position: relative;
color: #333;
text-decoration: none;
}
a:after {
content: "";
display: block;
margin: auto;
height: 2px;
width: 0px;
transition: all .8s;
}
a:hover:after {
width: 100%;
background: #333;
}

a {
display: inline-block;
position: relative;
color: #333;
text-decoration: none;
}
a:before,
a:after {
content: "";
display: block;
margin: auto;
height: 2px;
width: 0px;
background: #333;
transition: all .8s;
}
a:hover:before,
a:hover:after {
width: 100%;
}

a {
display: inline-block;
position: relative;
color: #333;
text-decoration: none;
padding: 0 4px;
}
a:before,
a:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
transform: scale(0);
transition: 0.5s;
}
a:before {
border-bottom: 2px solid #333;
border-left: 2px solid #333;
transform-origin: 0 100%;
}
a:after {
border-top: 2px solid #333;
border-right: 2px solid #333;
transform-origin: 100% 0%;
}
a:hover:after,
a:hover:before {
transform: scale(1);
}

a {
display: inline-block;
overflow: hidden;
position: relative;
color: #333;
text-decoration: none;
padding: 0 4px;
}
a:before,
a:after {
content: "";
width: 100%;
height: 2px;
position: absolute;
box-sizing: border-box;
transform: scale(0);
}
a:before {
transform: translateX(100%);
bottom: 0;
left: 0;
height: 2px;
border-bottom: 2px solid transparent;
border-left: 2px solid transparent;
transition: .1s transform linear, .1s height linear .1s;
}
a:after {
transform: translateX(-100%);
top: 0;
left: 0;
height: 2px;
border-top: 2px solid transparent;
border-right: 2px solid transparent;
transition: .1s transform linear .2s, .1s height linear .3s;
}
a:hover:after,
a:hover:before {
transform: translateX(0);
height: 100%;
border-color: #333;
}

a {
position: relative;
text-decoration: none;
color: #333;
z-index: 1;
}
a:before {
content: "";
background: #ccc;
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
transform: scaleX(0);
animation: .8s no-hover;
animation-fill-mode: forwards;
z-index: -1;
}
a:hover:before,
a:focus:before {
animation: .4s hover linear;
animation-fill-mode: forwards;
}
@keyframes hover {
0% {transform: scaleX(0);height: 5px;}
45% {transform: scaleX(1.05);height: 5px;}
55% {height: 5px;}
100% {transform: scaleX(1.05);height: 100%;}
}
@keyframes no-hover {
0% {transform: scaleX(1.05);height: 100%;}
45% {height: 5px;}
55% {transform: scaleX(1.05);height: 5px;opacity: 1;}
100% {transform: scaleX(0);height: 5px;opacity: .02;}
}

a {
display: inline-block;
position: relative;
color: #333;
text-decoration: none;
transition: all .5s ease;
transform-style: preserve-3d;
}
a:after {
content: "Enlace";
position: absolute;
top: -100%;
left: 0px;
width: 100%;
background: #ccc;
transform-origin: left bottom;
transform: rotateX(90deg);
}
a:hover {
transform-origin: center bottom;
transform: rotateX(-90deg) translateY(100%);
}


Una vez elegido el estilo que os gusta, el código correspondiente habría que añadirlo en la plantilla en cualquiera de las zonas de la página que admita CSS. Para Blogger ya detallé anteriormente cómo y dónde se podía incluir.


Puesto tal cual afectará a TODOS los enlaces de la página, así que en algunos casos podría ser conveniente limitarlo sólo a los enlaces del bloque dónde están las propias entradas. Para ello habría que cambiar todos los selectores a, a:hover, a:after, etc. por otros idénticos pero precedidos de la clase (o id) de la caja contenedora de dichas entradas.

Por ejemplo, en una plantilla estándar de Blogger ese contenedor sería .post-body, así que lo anterior quedaría como .post-body a, .post-body a:hover, .post-body a:after, etc.

De esta manera, la primera opción ("De izquierda a derecha") tendría que quedar así para que sólo afectara a los enlaces del texto de las entradas y no a otros:

.post-body a {
position: relative;
overflow: hidden;
display: inline-block;
text-decoration: none;
color: #333;
}
.post-body a:after {
content: "";
position: absolute;
bottom: 0;
left: -100%;
width: 100%;
height: 2px;
background: #333;
transition: left .8s;
}
.post-body a:hover:after {
left: 0;
}

...y de la misma manera habría que cambiar los selectores de los otros estilos para un resultado que sólo afecte a las entradas.


Si lo que queremos es aplicar este estilo a sólo unos enlaces muy concretos y no de forma general, entonces ya hay que incluir también una "marca" en el HTML. Para ello en primer lugar creamos un selector especial en lugar de los genéricos. Siguiendo con el ejemplo 1 nuestro CSS habría que incluirlo así:

a.enlacedes {
position: relative;
overflow: hidden;
display: inline-block;
text-decoration: none;
color: #333;
}
a.enlacedes:after {
content: "";
position: absolute;
bottom: 0;
left: -100%;
width: 100%;
height: 2px;
background: #333;
transition: left .8s;
}
a.enlacedes:hover:after {
left: 0;
}

Y ahora cada vez que queramos un enlace concreto con ese estilo concreto, tendríamos que añadir esa clase (.enlacedes) al enlace. Así:

<a class="enlacedes" href="http://direccionenlace.com">Enlace</a>

Tanto en esta entrada como en el Codepen que enlacé al principio de este post, todos los ejemplos están construidos de esta última manera para poder mostrar todos de forma individual.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

20 comentarios :

  1. Ya está aplicado a mi plantilla. Gracias por todo lo que se aprende aquí.

    ResponderEliminar
    Respuestas
    1. De nada. Ya vi que elegiste el tipo "4" ;)

      Eliminar
  2. Done! También el 4... elegante y discreto :D

    Gracias!

    ResponderEliminar
    Respuestas
    1. Jajaja... Pablo ¿todavía andas por aquí? ;)

      Eliminar
    2. ¿Cómo no? Silencioso y expectante del próximo artículo :D

      Eliminar
  3. Que tal Oloman, antes que nada gracias por todos tus valiosos aportes. Quería saber como hacer para que ninguna de las entradas salgan en la página principal. Porque la opción mínima de blogger es dejar siempre 1. Quiero dejar sólo los linck de las entradas (que ya lo tengo hecho). Bueno gracias y un saludo grande desde Uruguay

    ResponderEliminar
    Respuestas
    1. Hola Ana
      El único truco que conozco para eso se basa en usar una condición para que en página principal (y de navegación) el gadget que genera las entradas no se cargue.
      O eso o condicionar entero el #Blog1.
      O bien sólo fecha (data:post.date), título (data:post.title) y el contenido (data:post.body)

      Eliminar
    2. ¿Y si sólo a la entrada que se muestra en la página principal se le ocultara la caja de comentarios.? en ella podría poner una imagen o otra cosa y no se vería como una entrada. Si esta idea vale, me podrías ayudar con el código. Mil gracias.

      Eliminar
    3. Ocultar es otra opción, pero algo más lenta.
      En ese caso tendrías que poner esto justo antes de </head>
      <b:if cond='data:blog.pageType not in ["item"]'>
      <style>
      #Blog1 {display:none;}
      </style>
      </b:if>

      Eliminar
    4. Lo puse y desapareció la entrada en concreto, pero cuando hago click en los link no aparecen las entradas.

      Eliminar
    5. ¿Podrías decirme la dirección de la página dónde estás intentando poner esto que vea todo como es?

      Eliminar
  4. Hola saludos para tod@s pero que buen trabajo que haces. Gracias

    ResponderEliminar
    Respuestas
    1. Gracias a tí por hacerme saber eso. Siempre honra que te reconozcan como útil :)

      Eliminar
  5. Hola OLoman, retiré el código.Te paso la página peliculasgospel.blogspot.com mil gracias y perdona las molestias.

    ResponderEliminar
  6. Te cuento que me acordé que en edición de cada entrada hay una función que te deja elegir si deseas o no los comentarios en la misma. Así que esto resuelto, lo único que quedó la caja de comentario vacía y de aspecto no queda muy linda. Voy a ver si cambiándole el color y la línea, lo confundo con el fondo. Vamos a ver como queda jeje. Bueno pásate por el blog a ver tu opinión y seguimos en contacto. Verdaderamente muchas gracias por todo. Saludos

    ResponderEliminar
    Respuestas
    1. Pues no sé exactamente porque tardé en poder verlo, pero parece que ya está como querías ¿no?

      Eliminar
  7. Gracias por tu blog. Soy profesora de secundaria y me está viniendo muy bien para meterles el gusanillo de los lenguajes de programación a mis alumnos.
    Un saludo
    Elena M-H

    ResponderEliminar
    Respuestas
    1. De nada Elena. Si lo enfocas como un juego de ingenio quizás logres despertar a otro sector menos interesado en estos asuntos. Así me lo he tomado siempre yo, como pequeños retos a resolver.

      Eliminar
  8. Buenas tardes Oloman. Espero me puedas ayuda con mi blog que apenas empiezo en esto.
    Voy a dejar muchos articulo, pero mi blog tiene un menu horizontal que me lleva a la pagina respectiva. El problema es que tengo mucho texto, y lo peor, en cigo latex. asi que ya te imaginaras lo que tarda en cargarse.
    Lo que quiero hacer, es un indice y al darle clic en los temas, por ejemplo
    1. Tema uno
    2. Tema dos
    3. Etc

    A uno de estos, me lleve a su respectiva informacion, y ahi que se hagan los comentarios necesarios pero en esta, donde esta el indice NO APAREZCA la opcion de dejar mensajes.
    Por supuesto que los links de cada tena irab dirigidos a paginas en mi blog, el detalle es que no se como hacerle. Me podrias ayudar?

    ResponderEliminar
  9. Hola Oloman tengo una duda no tiene relacion con el tema pero espero me puedas ayudar quiero publicar en mi blog muchas imagenes en el mismo post al rededor de 100 o mas pero no quiero que redireccione ya que blogger le anexa un href para que la imagen se vea en tamaño real como evito esto como puedo eliminar o inavilitar ese href sin ir eliminandolo de imagen en imagen hay alguna forma?

    ResponderEliminar