Crear efectos CSS mientras se mantiene presionado el mouse puede agregar un poco de estilo a una página web aburrida. Si alguna vez ha cometido el error de intentar crear un efecto de retención suave del mouse, entonces tengo seis efectos CSS para elegir y usar en su próximo proyecto.
¡Vamos a lidiar con eso!
se que estamos hablando :hover y todo, pero a veces se puede (pero tal vez no siempre) ser una buena idea global :focus también, ya que no todas las interacciones son directamente desde el mouse, sino quizás tocando o presionando una tecla.
El efecto de retener un enlace de tensión deslizante
Este efecto aplica una sombra de campo al enlace incrustado, cambiando el color del texto del enlace en el proceso. Comenzamos agregando alrededor del enlace, luego agregamos un campo negativo con el mismo valor para evitar la distorsión del flujo de texto.
Usaremos box-shadow en lugar de la propiedad de fondo, ya que nos permite pasar.
a {
box-shadow: inset 0 0 0 0 #54b3d6;
color: #54b3d6;
margin: 0 -.25rem;
padding: 0 .25rem;
transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
box-shadow: inset 100px 0 0 0 #54b3d6;
color: white;
}El efecto de retener enlaces para intercambiar texto
Aquí hay uno divertido en el que intercambiamos el texto del enlace con otro texto mientras sostenemos el cursor. Pase el cursor sobre el texto y el texto asociado se desliza hacia afuera mientras se desliza el nuevo texto.
Es más fácil mostrar que decir.
Hay mucho engaño que ocurre en este efecto de retención del ratón. Pero la salsa mágica usa un atributo de datos para definir el texto que se desliza y llamarlo con content propiedad de conexión ::after pseudo-elemento.
Primero, etiquetado HTML:
<p>Hover <a href="https://css-tricks.com/css-link-hover-effects/#" data-replace="get a link"><span>get a link</span></a></p>Esta es una etiqueta muy integrada, pero está viendo una etiqueta de párrafo que contiene un enlace y un espacio.
Démosle a la relación algunos estilos básicos. Necesitamos darle un posicionamiento relativo para mantener los pseudoelementos, que estarán absolutamente posicionados, en su lugar, asegúrese de que se muestre como inline-block para obtener opciones para diseñar el elemento de cuadro y ocultar cualquier desbordamiento que puedan causar los pseudoelementos.
a {
overflow: hidden;
position: relative;
display: inline-block;
}EN ::before y ::after Los pseudoelementos deben tener un posicionamiento absoluto para que se alineen con la conexión real. Nos aseguraremos de que estén configurados en todo el ancho de la conexión con un desplazamiento cero a la posición izquierda, ajustándolos para alguna acción deslizante.
a::before,
a::after {
content: '';
position: absolute;
width: 100%;
left: 0;
}EN ::after el pseudo-elemento recibe el contenido del atributo de datos del enlace, que está en la etiqueta HTML:
a::after {
content: attr(data-replace);
}Ahora podemos transform: translate3d() en ::after pseudo-elemento a la derecha en un 200% Muévalo de nuevo a la posición de encendido :hoverMientras estamos en esto, podemos establecer este desplazamiento cero en el top dirección. Esto será importante más adelante cuando usemos ::before pseudo-elemento como un guión bajo debajo del texto.
a::after {
content: attr(data-replace);
top: 0;
transform-origin: 100% 50%;
transform: translate3d(200%, 0, 0);
}
a:hover::after,
a:focus::after {
transform: translate3d(0, 0, 0);
}nosotros también transform: scale() en ::before pseudo-elemento para que esté oculto por defecto, luego vuelva a escalarlo :hoverLo haremos pequeño, como 2px de altura y fíjelo a bottom por lo que parece subrayar el texto que se intercambia con ::after.
a::before {
background-color: #54b3d6;
height: 2px;
bottom: 0;
transform-origin: 100% 50%;
transform: scaleX(0);
}
a:hover::before,
a:focus::before {
transform-origin: 0% 50%;
transform: scaleX(1);
}¡Todo lo demás es una preferencia! transition en transform efectos, algunos colores y lo que no para obtener el efecto completo. Estos valores dependen totalmente de usted.
Ver CSS completo
a {
overflow: hidden;
position: relative;
display: inline-block;
}
a::before,
a::after {
content: '';
position: absolute;
width: 100%;
left: 0;
}
a::before {
background-color: #54b3d6;
height: 2px;
bottom: 0;
transform-origin: 100% 50%;
transform: scaleX(0);
transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
}
a::after {
content: attr(data-replace);
height: 100%;
top: 0;
transform-origin: 100% 50%;
transform: translate3d(200%, 0, 0);
transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
color: #54b3d6;
}
a:hover::before {
transform-origin: 0% 50%;
transform: scaleX(1);
}
a:hover::after {
transform: translate3d(0, 0, 0);
}
a span {
display: inline-block;
transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
}
a:hover span {
transform: translate3d(-200%, 0, 0);
}El efecto de retener una conexión de fondo creciente
Este es un efecto muy popular que he visto utilizar en muchos lugares. La idea es que utilices el enlace de ::before pseudo-elemento como un subrayado en negrita que se encuentra ligeramente detrás del texto del enlace real. Luego, cuando mantiene presionado el mouse, el pseudo-elemento se expande para cubrirlo todo.
Bien, algunos estilos básicos para la relación que queremos no son text-decoration desde ::before actuará como uno solo y luego mantendrá algún posicionamiento relativo ::before en su lugar cuando le damos a este posicionamiento absoluto.
a {
text-decoration: none;
position: relative;
}Ahora vamos a configurarlo ::before haciendo algo asi 8px alto para que se vea como un reflejo grueso. También le daremos un posicionamiento absoluto para que tengamos control para hacerlo con todo el ancho de la conexión real, mientras lo desplazamos para que esté encendido. left y es solo una pequeña parte de bottom por lo que parece enfatizar sutilmente la conexión. también puedes dárselo z-index: -1 así que estamos seguros de que está detrás de la conexión.
a::before {
content: '';
background-color: hsla(196, 61%, 58%, .75);
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
height: 8px;
z-index: -1;
}Bien bien. Hagámoslo como si ::before aumenta cuando se mantiene pulsado el cursor de enlace. Todo lo que necesitamos es cambiar la altura de 3px para 100%Fíjate que también juego bottom cambie de nuevo a cero para que el fondo cubra más espacio a medida que crece.
a:hover::before {
bottom: 0;
height: 100%;
}Ahora, para una transición ligera en estos cambios:
a::before {
content: '';
background-color: hsla(196, 61%, 58%, .75);
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
height: 8px;
z-index: -1;
transition: all .3s ease-in-out;
}
Ver CSS completo
a {
text-decoration: none;
color: #18272F;
font-weight: 700;
position: relative;
}
a::before {
content: '';
background-color: hsla(196, 61%, 58%, .75);
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
height: 8px;
z-index: -1;
transition: all .3s ease-in-out;
}
a:hover::before {
bottom: 0;
height: 100%;
}El efecto de sostener el cursor de enlace de derecha a izquierda
Personalmente me gusta usar este efecto. para enlaces en la navegación. La relación comienza en un color sin énfasis. Luego, mientras mantiene presionado el mouse, un nuevo color se desliza hacia la derecha, mientras que el resaltado se desliza hacia la izquierda.
Coqueto, ¿no? Hay mucho movimiento allí, por lo que puede pensar en las implicaciones de la accesibilidad y abarcar todo en prefers-reduced-motion solicite reemplazarlo con algo más fino para aquellos con sensibilidad al movimiento.
Así es como funciona. Le damos a la relación un degradado lineal del fondo con una parada firme entre dos colores en el medio.
a {
background-image: linear-gradient(
to right,
#54b3d6,
#54b3d6 50%,
#000 50%
);
}Hacemos el fondo para duplicar el ancho de la conexión, o 200%y colóquelo completamente a la izquierda. Esto hace que parezca que solo se muestra uno de los dos degradados de color.
a {
background-image: linear-gradient(
to right,
#54b3d6,
#54b3d6 50%,
#000 50%
);
background-size: 200% 100%;
background-position: -100%;
}La magia sucede cuando buscamos algunos no estándar. -webkit-propiedades con prefijo. Uno elimina el color del texto para hacerlo transparente. El otro corta el degradado del fondo del texto para que parezca que el texto es en realidad el color de fondo.
a {
background-image: linear-gradient(
to right,
#54b3d6,
#54b3d6 50%,
#000 50%
);
background-size: 200% 100%;
background-position: -100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}¿Sigues conmigo? Ahora hagamos el resaltado falso de la relación poniendo ::before Le daremos el mismo color que le dimos a la parte oculta del degradado contra el fondo de la relación y lo posicionaremos debajo de la relación real para que se vea bien text-decoration: underline.
a:before {
content: '';
background: #54b3d6;
display: block;
position: absolute;
bottom: -3px;
left: 0;
width: 0;
height: 3px;
}Mientras mantenemos presionado el mouse, deslizamos ::before en el acto, entrando por la izquierda:
a:hover {
background-position: 0;
}Ahora, eso es un poco complicado. Al sostener el mouse, hacemos las conexiones. ::before pseudo-elemento 100% del ancho de la conexión. Si tuviéramos que aplicar esto directamente para mantener el mouse sobre el enlace, haríamos que el enlace ocupase todo el ancho del enlace, lo que lo movería por la pantalla.
a:hover::before {
width: 100%;
}Agregue una pequeña transición para suavizar las cosas:
a {
background-image: linear-gradient(
to right,
#54b3d6,
#54b3d6 50%,
#000 50%
);
background-size: 200% 100%;
background-position: -100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: all 0.3s ease-in-out;
}
Ver CSS completo
a {
background-image: linear-gradient(
to right,
#54b3d6,
#54b3d6 50%,
#000 50%
);
background-size: 200% 100%;
background-position: -100%;
display: inline-block;
padding: 5px 0;
position: relative;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: all 0.3s ease-in-out;
}
a:before {
content: '';
background: #54b3d6;
display: block;
position: absolute;
bottom: -3px;
left: 0;
width: 0;
height: 3px;
transition: all 0.3s ease-in-out;
}
a:hover {
background-position: 0;
}
a:hover::before {
width:100%;
}El efecto de mantener una fuerte conexión de arco
no podemos hacer eso text-decoration-color: rainbowpero podemos falsificarlo un poco background magia mezclada con gradientes lineales.
Primero quitamos los enlaces text-decoration:
a {
text-decoration: none;
}Ahora para estos gradientes. Conectamos dos gradientes lineales juntos al mismo background propiedad. Un degradado es el color original antes de sostener el mouse. El segundo es el arcoíris al sostener el cursor.
a {
background:
linear-gradient(
to right,
rgba(100, 200, 200, 1),
rgba(100, 200, 200, 1)
),
linear-gradient(
to right,
rgba(255, 0, 0, 1),
rgba(255, 0, 180, 1),
rgba(0, 100, 200, 1)
);
}Simplifiquemos el tamaño del fondo. 3px alto, por lo que parece, ya sabes, resaltando. Podemos medir ambos gradientes juntos en background-size propiedad para que el gradiente inicial sea de ancho completo y 3px alto y el arco es de ancho cero.
a {
background:
linear-gradient(
to right,
rgba(100, 200, 200, 1),
rgba(100, 200, 200, 1)
),
linear-gradient(
to right,
rgba(255, 0, 0, 1),
rgba(255, 0, 180, 1),
rgba(0, 100, 200, 1)
);
background-size: 100% 3px, 0 3px;
}Ahora podemos colocar los degradados de fondo, simultáneamente en background-position propiedad: de modo que el primer gradiente sea completamente visible y el arco quede fuera de la vista. Ah, y asegurémonos de que el fondo no se repita mientras estamos en él.
a {
background:
linear-gradient(
to right,
rgba(100, 200, 200, 1),
rgba(100, 200, 200, 1)
),
linear-gradient(
to right,
rgba(255, 0, 0, 1),
rgba(255, 0, 180, 1),
rgba(0, 100, 200, 1)
);
background-size: 100% 3px, 0 3px;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat;
}actualicemos background-size al sostener el cursor para que los degradados intercambien sus valores:
a:hover {
background-size: 0 3px, 100% 3px;
}Finalmente, una pequeña transición de retención de cursor:
a {
background:
linear-gradient(
to right,
rgba(100, 200, 200, 1),
rgba(100, 200, 200, 1)
),
linear-gradient(
to right,
rgba(255, 0, 0, 1),
rgba(255, 0, 180, 1),
rgba(0, 100, 200, 1)
);
background-size: 100% 3px, 0 3px;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat;
transition: background-size 400ms;
}¡Voila!
El efecto de pasar una conexión estresada
Jeff Graham en realidad cubrió el mismo recientemente cuando analizó el efecto de la suave detención de Adam Argyle. En su demostración, el color de fondo entra por la izquierda detrás del enlace, luego sale por la derecha cuando se muestra el ratón.
Mi versión reduce el fondo, por lo que está bastante resaltado.
a {
position: relative;
}
a::before {
content: '';
position: absolute;
width: 100%;
height: 4px;
border-radius: 4px;
background-color: #18272F;
bottom: 0;
left: 0;
transform-origin: right;
transform: scaleX(0);
transition: transform .3s ease-in-out;
}
a:hover::before {
transform-origin: left;
transform: scaleX(1);
}¡Esta no es la única forma de lograrlo! Aquí hay otro de Justin Wong background en lugar de:
Jeff también tiene una descripción general de los efectos CSS de retener enlaces, que van desde puros hasta francamente absurdos. ¡Vale la pena echarle un vistazo!
¡Buena conexión!
Hay muchas opciones cuando se trata de crear su propio efecto de retención de cursor para enlaces CSS incrustados. Incluso puedes jugar con estos efectos y crear algo nuevo. Espero que hayas disfrutado el artículo. ¡Sigue experimentando!
Deja una respuesta