Quiero ::antes de que la animación comience de derecha a izquierda cuando el ancho: 100%; y cuando lo pasas por encima, la animación va de izquierda a derecha (regresando) ancho: 0; ¿Hay alguna manera de hacer esto con CSS?
span {
display: inline-block;
text-align: center;
line-height: 40px;
transition: ease-in-out 3s;
}
span::before , span::after{
content: " ";
display: block;
width: 100%;
height: 5px;
background-color: red;
transition: ease-in-out 3s;
}
span::before {
left: auto;
bottom: auto;
right: 0;
top: 2px;
transition: ease-in-out 3s;
}
span:hover::after, span:hover::before{
width: 0;
transition: ease-in-out 3s;
}
.kotak:hover {
width: 0%;
}
<!DOCTYPE html>
<html>
<head>
<title>Simple Website</title>
<link rel="stylesheet" href="https://stackoverflow.com/questions/66840871/style.css">
</head>
<body>
<Span>PLACEHOLDER</Span>
</body>
</html>
------------------------------------
Simplifique su lógica como se muestra a continuación. Cambia entre izquierda y derecha para controlar la posición
span {
display: inline-block;
line-height: 40px;
background:
linear-gradient(red 0 0) top right,
linear-gradient(red 0 0) bottom left;
background-repeat:no-repeat;
background-size:100% 5px;
transition: ease-in-out 1s,background-position 0s 1s;
/* or simply transition: ease-in-out 1s */
}
span:hover{
background-size:0% 5px;
background-position: /* remove this to keep the same position */
top left,
bottom right
}
<span>PLACEHOLDER</span>
2
gradiente lineal (rojo 0 0) ¿Qué significa 0 para el primero, supongo que es color detenido, y cuál es el segundo?
–
usuario14882773
29/03/2021 a las 11:17
1
@Lopzx ambos son paradas de color. Esta es una especie de expresión hacky para acortarla. significa que coloco un color tanto en 0 como en 0, pero el navegador luego cambiará el último 0 a 100%;) por lo que es como gradiente lineal (rojo 0 100%) que también es gradiente lineal (rojo 0,rojo 100%)
Temani Afif
29/03/2021 a las 11:21
------------------------------------
después de algunas pruebas finalmente encontré la respuesta a mi pregunta
Agregué comentarios al fragmento de código
/* Use Parent set to relative to contain absolute */
.box {
position: relative;
display: inline-block;
margin-bottom : 20px;
line-height: 60px;
}
/* Set Position to Absolute so we can use top,right,bottom,left */
.box::before,
.box::after {
content: "";
display: block;
position: absolute;
background-color: blue;
width: 100%;
height: 10px;
bottom: 0;
transition: 3s;
}
/* Set to right so the ::before start from right side to the left */
.box::before {
top: 0;
right: 0px;
}
.box:hover::after,
.box:hover::before {
width: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Simple Website</title>
<link rel="stylesheet" href="https://stackoverflow.com/questions/66840871/style.css">
</head>
<body>
<div class="box">PLACE HOLDERDERER</div>
</body>
</html>
Compartir
mejorar esta respuesta
Seguir
Respondido
28 de marzo de 2021 a las 13:34
usuario14882773
usuario14882773
