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)}
}
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>