Rellenar el color de fondo de izquierda a derecha CSS

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:

1. 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
2. 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.
3. 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

  Cover left
  

    Cover left
  


.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.

Reseñas y calificaciones de la guía

---

---

Utiliza Nuestro Buscador