Rellenar color de fondo CSS de izquierda a derecha

Question

Rellenar color de fondo CSS de izquierda a derecha

Tener un juego con algunos css3 hoy, transiciones principalmente.

Lo que me gustaría lograr es que al pasar por encima de un elemento li el fondo se llene de izquierda a derecha con un color diferente, idealmente me gustaría ser capaz de llenar la mitad o todo el camino.. He comenzado un jsfiddle

¿Necesito usar la propiedad

-vendor-prefix transition

Podría alguien darme algunos consejos para lograr esto, por favor.

Gracias

29

css css3

Author: Richlewis, 2013-06-20

Source

3 answers

Un solo código css en hover puede hacer el truco: box-shadow: inset 100px 0 0 0 #e0e0e0;

Una demo completa se puede encontrar en mi violín:

Https://jsfiddle.net/shuvamallick/3o0h5oka /

15

Author: shuva mallick,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-21 13:18:57

Si usted es como yo y necesita cambiar el color del texto mismo también mientras que al mismo tiempo llena el color de fondo compruebe mi solución.

Pasos para crear:

Tienen dos texto, uno es de color estático en color al pasar el cursor, y el otro en color de estado predeterminado que se moverá al pasar el cursor
Al pasar el ratón mueve la envoltura del texto no estático mientras que al mismo tiempo mueve el texto interior de esa envoltura en la dirección opuesta.
asegúrese de agregar desbordamiento oculto donde sea necesario

Lo bueno de esta solución:

Soporte IE9, utiliza solo transform
El botón (o elemento que está aplicando la animación) tiene un ancho fluido, por lo que no se utilizan valores fijos aquí

No es tan bueno esta solución:

Un marcado realmente desordenado, podría ser resuelto mediante el uso de pseudo elementos y att(datos)?
Hay algún pequeño error en la animación cuando se tiene más de un botón uno al lado del otro, tal vez podría ser fácilmente resuelto, pero no me tomó mucho tiempo para investigar todavía.

Compruebe la pluma - - - > https://codepen.io/nikolamitic/pen/vpNoNq

<button class="btn btn--animation-from-right">
  <span class="btn__text-static">Cover left</span>
  <div class="btn__text-dynamic">
    <span class="btn__text-dynamic-inner">Cover left</span>
  </div>
</button>

.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 .btn modi modificador animation-from-right si desea animar a la izquierda.

0

Author: Nikola Mitic,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-17 17:16:26

score 85 · Accepted Answer

Lo que tendrá que hacer aquí es usar un degradado lineal como fondo y animar la posición del fondo. En el código:

Use un gradiente lineal (50% rojo, 50% azul) y dígale al navegador que el fondo es 2 veces mayor que el ancho de elments (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 cursor, cambie la posición de fondo a right bottom y con transition:all 2s ease;, la posición cambiará gradualmente (es mejor con linear tough) background-position: right bottom;

Http://jsfiddle.net/75Umu/3 /

En cuanto a los prefijos-de-proveedor, vea los comentarios a su pregunta

extra si desea tener una "transición" en el color, puede hacerlo con un ancho del 300% y hacer que la transición comience en el 34% (un poco más de 1/3) y termine en el 65% (un poco menos de 2/3).

background: linear-gradient(to right, red 34%, blue 65%);
background-size: 300% 100%;