Foros del Web » Creando para Internet » CSS »

Rellenar circulos

Estas en el tema de Rellenar circulos en el foro de CSS en Foros del Web. Hola. Estoy empezando con CSS y quería hacer una cosa, pero estoy buscando por internet y no consigo exactamente lo que quiero. Mi intención es ...
  #1 (permalink)  
Antiguo 16/05/2015, 07:21
 
Fecha de Ingreso: septiembre-2014
Mensajes: 72
Antigüedad: 10 años, 2 meses
Puntos: 0
Rellenar circulos

Hola.

Estoy empezando con CSS y quería hacer una cosa, pero estoy buscando por internet y no consigo exactamente lo que quiero. Mi intención es poner una fila de unos 10 círculos, y que se vayan rellenando con un efecto animado cuando el usuario entre en la página, no que simplemente cambien de color, si no que haya un efecto de "relleno", de izquierda a derecha. Además, quiero que el efecto sea permanente y que se inicie al entrar en la página, sin necesidad de pasar el ratón por encima. Sería algo parecido al efecto "sweep to right" de esta página:

http://ianlunn.github.io/Hover/

Os dejo el código del ejemplo por si sirve de ayuda:

Código HTML:
/* Sweep To Right */
.hvr-sweep-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-sweep-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098d1;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {
  color: white;
}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
Gracias y un saludo

Etiquetas: background, color, página, rellenar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:25.