bottom animate css css3 border css-transitions css-transforms

animate - css menu border bottom animation



Efecto de desplazamiento: ampliar el borde inferior (7)

Para expandir el borde inferior al pasar el mouse , puede usar transform:scaleX''(); ( referencia mdn ) y realice la transición de 0 a 1 en el estado de desplazamiento.

Aquí hay un ejemplo de cómo puede verse el efecto de desplazamiento de borde:

El borde y la transición se establecen en un pseudo elemento para evitar la transición del texto y evitar agregar marcas.
Para expandir el borde inferior de izquierda a derecha, puede cambiar la propiedad de origen de transformación a la izquierda o derecha del pseudo elemento:

h1 { color: #666;display:inline-block; margin:0;text-transform:uppercase; } h1:after { display:block; content: ''''; border-bottom: solid 3px #019fb6; transform: scaleX(0); transition: transform 250ms ease-in-out; } h1:hover:after { transform: scaleX(1); } h1.fromRight:after{ transform-origin:100% 50%; } h1.fromLeft:after{ transform-origin: 0% 50%; }

<h1 class="fromCenter">Expand from center</h1><br/> <h1 class="fromRight">Expand from right</h1><br/> <h1 class="fromLeft">Expand from left</h1>

Nota: debe agregar prefijos de proveedor para maximizar la compatibilidad del navegador (consulte canIuse ).

Expande el borde inferior al pasar el mouse con 2 líneas

Puede lograr este efecto cuando el texto se extiende en 2 líneas. El pseudo elemento before está absolutamente posicionado para subrayar la primera línea con bottom:1.2em; :

h1 { position:relative;color: #666;display:inline-block; margin:0;text-transform:uppercase;text-align:center;line-height:1.2em; } h1:after, h1:before { display:block; content: ''''; border-bottom: solid 3px #019fb6; transform: scaleX(0); transition: transform 250ms ease-in-out; } h1:before{ position:absolute; bottom:1.2em; left:0; width:100%; } .ef2:hover:after { transition-delay:150ms; } h1:hover:after, h1:hover:before { transform: scaleX(1); }

<h1>Expand border<br/>on two lines</h1> <br/> <br/> <h1 class="ef2">Expand border<br/>effect two</h1>

Diferente dirección de transición al pasar y entrar:

El punto es cambiar la posición de origen de transformación de un lado a otro en el estado de desplazamiento. De esta manera, el boder inferior ingresa por un lado al pasar el mouse y sale por el otro cuando el elemento ya no está suspendido .
Aquí hay una demostración:

h1 { color: #666;display:inline-block; margin:0;text-transform:uppercase; } h1:after { display:block; content: ''''; border-bottom: solid 3px #019fb6; transform: scaleX(0); transition: transform 250ms ease-in-out; } h1.fromLeft:after{ transform-origin: 100% 50%; } h1.fromRight:after{ transform-origin: 0% 50%; } h1.fromLeft:hover:after{ transform: scaleX(1); transform-origin: 0% 50%; } h1.fromRight:hover:after{ transform: scaleX(1); transform-origin: 100% 50%; }

<h1 class="fromRight">Expand from right</h1><br/> <h1 class="fromLeft">Expand from left</h1>

Estoy tratando de obtener un efecto de transición sobre el borde que el borde se expande al pasar.

h1 { color: #666; } h1:after { position: absolute; left: 10px; content: ''''; height: 40px; width: 275px; border-bottom: solid 3px #019fb6; transition: left 250ms ease-in-out, right 250ms ease-in-out; opacity: 0; } h1:hover:after { opacity: 1; }

<h1>CSS IS AWESOME</h1>

He intentado esto en Jsfiddle


Sé que esta es una publicación antigua y ya está respondida, pero es posible que también te guste el siguiente efecto.

<div class="cd-single-point"> <a class="cd-img-replace" href="#0"></a> </div> .cd-single-point { position: absolute; list-style-type: none; left: 20px; top: 20px; } .cd-single-point>a { position: relative; z-index: 2; display: block; width: 10px; height: 10px; border-radius: 50%; background: #0079ff; -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; -o-transition: background-color 0.2s; transition: background-color 0.2s; } .cd-single-point::after { content: ''''; position: absolute; border-radius: 50%; width: 100%; height: 100%; top: 0; left: 0; animation: cd-pulse 2s infinite; } @keyframes cd-pulse { 0% {box-shadow:0 0 0 0 #0079ff} 100%{box-shadow:0 0 0 20px rgba(255,150,44,0)} }

DEMO


podemos hacerlo usando un simple efecto de transición.

HTML

li { margin-bottom: 10px; } .cool-link { display: inline-block; color: #000; text-decoration: none; } .cool-link::after { content: ''''; display: block; width: 0; height: 2px; background: #000; transition: width .3s; } .cool-link:hover::after { width: 100%; //transition: width .3s; }

CSS

<ul> <li><a class="cool-link" href="#">A cool link</a></li> <li><a class="cool-link" href="#">A cool link</a></li> <li><a class="cool-link" href="#">A cool link</a></li> </ul>

Enlace a Fiddle


versión simple y ligera

<h1>CSS IS AWESOME</h1>

h1 { color: #666; position: relative; display: inline-block; } h1:after { position: absolute; left: 50%; content: ''''; height: 40px; height: 5px; background: #f00; transition: all 0.5s linear; width: 0; bottom: 0; } h1:hover:after { width: 270px; margin-left: -135px; }


h1 { color: #666; display:inline-block; margin:0; text-transform:uppercase; } h1:after { display:block; content: ''''; border-bottom: solid 3px #92a8d1; transform: scaleX(0); transition: transform 800ms ease-in-out; } h1:hover:after { transform: scaleX(1); }

<h1 class="fromCenter">Hover Over Me</h1><br/>


h1 { color: #666; } h1:after { position: absolute; left: 10px; content: ''''; height: 40px; width: 275px; border-bottom: solid 3px #019fb6; transition: opacity 450ms ease-in-out; opacity: 0; } h1:hover:after { opacity: 1; }

<h1>CSS IS AWESOME</h1>


transition: all 1000ms ease-in-out;

Demo

o estas buscando esto

Demo2