JMiur [E]

Antes que nadie pregunte: No, esto no tiene ninguna utilidad práctica. No incrementará las visitas, no agregará enlaces entrantes, no hará que un sitio se posicione primero en Google, tenga 456 tweets en 5 minutos ni conseguirá subir los clicks de Adsense para que podamos comprarnos esa isla en las Bahamas. Simplemente es ... un experimento sin consecuencias.

Y para colmo ... largo de escribir:

<style>
/* agregar los prefijos necesarios en las propiedades para que funcione en distintos navegadores */
@keyframes wiggle {
  0% {transform: rotate( -10deg );}
  100% {transform: rotate( 10deg );}
}
div#wiggle {
  left: 50%;
  position: absolute;
  top: 50%;
}
div#wiggle b {
  display: block;
  border-radius: 5%;
  position: absolute;
  transform: rotate(-10deg);
}
div#wiggle b:nth-child(1) {
  width: 20px;
  height: 20px;
  left: -10px;
  top: -10px;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 50ms infinite alternate;
}
div#wiggle b:nth-child(2) {
  width: 40px;
  height: 40px;
  left: -20px;
  top: -20px;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 100ms infinite alternate;
}
div#wiggle b:nth-child(3) {
  width: 60px;
  height: 60px;
  left: -30px;
  top: -30px;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 150ms infinite alternate;
}
div#wiggle b:nth-child(4) {
  width: 80px;
  height: 80px;
  left: -40px;
  top: -40px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 200ms infinite alternate;
}
div#wiggle b:nth-child(5) {
  width: 100px;
  height: 100px;
  left: -50px;
  top: -50px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 250ms infinite alternate;
}
div#wiggle b:nth-child(6) {
  width: 120px;
  height: 120px;
  left: -60px;
  top: -60px;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 300ms infinite alternate;
}
div#wiggle b:nth-child(7) {
  width: 140px;
  height: 140px;
  left: -70px;
  top: -70px;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 350ms infinite alternate;
}
div#wiggle b:nth-child(8) {
  width: 160px;
  height: 160px;
  left: -80px;
  top: -80px;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 400ms infinite alternate;
}
div#wiggle b:nth-child(9) {
  width: 180px;
  height: 180px;
  left: -90px;
  top: -90px;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 450ms infinite alternate;
}
div#wiggle b:nth-child(10) {
  width: 200px;
  height: 200px;
  left: -100px;
  top: -100px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 500ms infinite alternate;
}
div#wiggle b:nth-child(11) {
  width: 220px;
  height: 220px;
  left: -110px;
  top: -110px;
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 550ms infinite alternate;
}
div#wiggle b:nth-child(12) {
  width: 240px;
  height: 240px;
  left: -120px;
  top: -120px;
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 600ms infinite alternate;
}
div#wiggle b:nth-child(13) {
  width: 260px;
  height: 260px;
  left: -130px;
  top: -130px;
  box-shadow: 0 0 26px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 650ms infinite alternate;
}
div#wiggle b:nth-child(14) {
  width: 280px;
  height: 280px;
  left: -140px;
  top: -140px;
  box-shadow: 0 0 28px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 700ms infinite alternate;
}
div#wiggle b:nth-child(15) {
  width: 300px;
  height: 300px;
  left: -150px;
  top: -150px;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 750ms infinite alternate;
}
</style>

<div id="wiggle">
<b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b>
</div>

REFERENCIAS:codepen.io

4 comentarios:

Unknown  

Es una máquina para medir el equilibrio emocional ;)

JMiur  

No lo había pensado de ese modo ... tomaré Valium, entonces :-)

Unknown  

Noooo fijás la vista, en un momento queda todo resuelto ;)

Hablando de Valium, hace muchos años no escuchaba el nombre de ese medicamento, no recuerdo ahora el libro que leí de una historia real: una mujer que se abandona al mismo y fallece; antes era parte del cóctel para anestesiar para una cirugía, ahora no lo sé.

JMiur  

Yo tampoco, sólo sé que lo uso como sinónimo de sedante :-D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR