Traemos la mejor respuesta que encontramos en internet. Esperamos que te sea de utilidad y si deseas aportar algún detalle que nos pueda ayudar a perfeccionar nuestra información hazlo con libertad.
Solución:
Lo que deberá hacer aquí es usar un degradado lineal como fondo y animar la posición del fondo. En codigo:
Use un degradado lineal (50 % rojo, 50 % azul) y dígale al navegador que el fondo es 2 veces más grande que el ancho del elemento (ancho: 200 %, alto: 100 %), luego dígale que coloque el fondo a la izquierda.
background: linear-gradient(to right, red 50%, blue 50%);
background-size: 200% 100%;
background-position:left bottom;
Al pasar el mouse, cambie la posición de fondo a right bottom
y con transition:all 2s ease;
, la posición cambiará gradualmente (es mejor con linear
duro) posición de fondo: abajo a la derecha;
http://jsfiddle.net/75Umu/3/
En cuanto a -vendedor-prefix‘es, ver los comentarios a su pregunta
extra
Si desea tener una “transición” en el color, puede hacer que tenga un ancho del 300 % y hacer que la transición comience en el 34 % (un poco más de 1/3) y finalice en el 65 % (un poco menos de 2/3 ).
background: linear-gradient(to right, red 34%, blue 65%);
background-size: 300% 100%;
Manifestación:
div
font: 22px Arial;
display: inline-block;
padding: 1em 2em;
text-align: center;
color: white;
background: red; /* default color */
/* "to left" / "to right" - affects initial color */
background: linear-gradient(to left, salmon 50%, lightblue 50%) right;
background-size: 200%;
transition: .5s ease-out;
div:hover
background-position: left;
Hover me
Un solo código css al pasar el mouse puede hacer el truco:
box-shadow: inset 100px 0 0 0 #e0e0e0;
Una demostración completa se puede encontrar en mi violín:
https://jsfiddle.net/shuvamallick/3o0h5oka/
Si eres como yo y necesitas cambiar el color del texto y, al mismo tiempo, llenar el color de fondo, consulta mi solución.
Pasos para crear:
- Tiene dos textos, uno es static coloreado en color al pasar el mouse, y el otro en el color de estado predeterminado que se moverá al pasar el mouse
- Al pasar el cursor, mueva el envoltorio del no static un texto mientras que al mismo tiempo mueve el texto interior de ese envoltorio en la dirección opuesta.
- Asegúrese de agregar el desbordamiento oculto donde sea necesario
Lo bueno de esta solución:
- Admite IE9, solo usa transformación
- El botón (o el elemento al que está aplicando la animación) tiene un ancho fluido, por lo que no se utilizan valores fijos aquí
No es tan bueno lo de esta solución:
- Un marcado realmente desordenado, ¿podría resolverse usando pseudo elementos y att (datos)?
- Hay una pequeña falla en la animación cuando se tiene más de un botón uno al lado del otro, tal vez podría resolverse fácilmente, pero aún no me tomé mucho tiempo para investigar.
Revisa el bolígrafo —> https://codepen.io/nikolamitic/pen/vpNoNq
.btn
padding: 10px 20px;
position: relative;
border: 2px solid #222;
color: #fff;
background-color: #222;
position: relative;
overflow: hidden;
cursor: pointer;
text-transform: uppercase;
font-family: monospace;
letter-spacing: -1px;
[class^="btn__text"]
font-size: 24px;
.btn__text-dynamic,
.btn__text-dynamic-inner
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index: 2;
transition: all ease 0.5s;
.btn__text-dynamic
background-color: #fff;
color: #222;
overflow: hidden;
&:hover
.btn__text-dynamic
transform: translateX(-100%);
.btn__text-dynamic-inner
transform: translateX(100%);
.btn--animation-from-right
&:hover
.btn__text-dynamic
transform: translateX(100%);
.btn__text-dynamic-inner
transform: translateX(-100%);
Puede eliminar el modificador .btn–animation-from-right si desea animar a la izquierda.