06 · Random

Random

Variación sin JS con random()

Experimental · Chrome 125+ con flag
← Índice

Demo decorativa con fallback: si random() no está disponible, usa posiciones fijas.

css
.p {
  position: absolute;
  left: random(5%, 92%);      /* posición X aleatoria */
  top:  random(5%, 85%);      /* posición Y aleatoria */
  width:  random(--sz, 6px, 18px);  /* tamaño aleatorio */
  height: random(--sz, 6px, 18px); /* mismo valor que width */
  opacity: random(.3, .9);    /* transparencia aleatoria */
  scale:   random(--sc, .6, 1.4);   /* escala aleatoria */
  animation: drift random(3s, 7s) ease-in-out infinite alternate;
  animation-delay: random(0s, 4s);
}

Nota honesta sobre soporte

Muchas de estas APIs son recientes y aún no están en todos los navegadores (ver pill de cada sección). La gracia es que todas degradan bien: el carousel sigue scrolleando, el accordion abre/cierra, el textarea funciona — solo sin el "plus" animado.