One div: Iconos utilzando sólo CSS

One div es un sitio donde podemos buscar y copiar el código necesario para utilizar íconos o símbolos creados exclusivamente con CSS; una técnica cuyo uso se va va extendiendo ya que tiene la ventaja de no utilizar imágenes y de ser flexibles porque podemos variar su tamaño con sencillez sin que se deformen.

Además, basta un poco de imaginación para aprovechar las distintas propiedades, cambiar colores, agregar animaciones o utilizar efectos aunque, claro está, como todas estas cosas, la compatibilidad con los distintos navegadores es una limitación importante pero, poco a poco, es algo que deberíamos dejar de lado y empezar a aceptar que esas limitaciones existirán siempre y que nada es universal excepto que 2+2=4.

Algunos ejemplos:

<style>
.mug_animate {
  box-shadow: 0 -3em 0 0 #0AF inset;
  height: 2.5em;
  position: relative;
  -moz-transition: all 1000ms linear 0s;
  -webkit-transition: all 1000ms linear 0s;
  -o-transition: all 1000ms linear 0s;
  -ms-transition: all 1000ms linear 0s;
  transition: all 1000ms linear 0s;
  width: 1.5em;
}
.mug_animate:after {
  border-color: #DDD transparent #DDD #DDD;
  border-image: none;
  border-radius: 0.75em 0 0 0.75em;
  border-style: solid none solid solid;
  border-width: 0.25em medium 0.25em 0.25em;
  content: "";
  height: 1.5em;
  left: -1em;
  position: absolute;
  top: 0.25em;
  width: 0.75em;
}
.mug_animate:before {
  border: 0.25em solid #DDD;
  border-radius: 0 0 0.2em 0.2em;
  content: "";
  height: 2.5em;
  left: -0.20em;
  position: absolute;
  top: -0.5em;
  width: 1.5em;
}
.mug_animate:hover {
  box-shadow: 0 0 0 0 #00F inset;
}
</style>

<div class="mug_animate"></div>

<style>
.fir {
  box-shadow: 0em 0.9em 0 -0.8em #4D4,0em 1em 0 -0.8em #4D4,0em 1.1em 0 -0.8em #4D4,0em 1.2em 0 -0.8em #4D4;
  border-bottom: 1.7em solid #4D4;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  font-size: 20px;
  height: 0em;
  position: relative;
  width: 0em;
}

.fir:before {
  border-bottom: 1em solid #4D4;
  border-left: 0.7em solid transparent;
  border-right: 0.7em solid transparent;
  content: '';
  display: block;
  height: 0em;
  left: -0.7em;
  position: absolute;
  top: -0.2em;
  width: 0em;
}

.fir::after {
  border-bottom: 0.7em solid #4D4;
  border-left: 0.5em solid transparent;
  border-right: 0.5em solid transparent;
  content: '';
  display: block;
  height: 0em;
  left: -0.5em;
  position: absolute;
  top: -0.5em;
  width: 0em;
}
</style>

<div class="fir"></div>

<style>
.pacman {
  background-image: -webkit-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: -moz-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: -o-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: -ms-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  border-radius: 3em 3em 0 0;
  height: 1.5em;
  position: relative;
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  width: 3em;
}

.pacman:after {
  background-color: #EE0;
  border-radius: 0 0 3em 0;
  content: '';
  height: 1.5em;
  left: 0em;
  position: absolute;
  top: 1.45em;
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  width: 1.5em;
}
</style>

<div class="pacman"></div>

Quienes utilicen jQuery y actualicen la librería de manera sistemática o la enlacen desde los repositorios de Google, verá que la nueva versión es la 1.9.

Esto, que es algo normal y suele ser una actualización sin demasiada importancia desde el punto de vista de un usuario, se puede transformar en un problema serio ya que, esta versión no sólo modifica ciertas funciones sino que elimina otras de manera definitiva por lo tanto, algo que tal vez usábamos de manera normal, al actualizarla, dejará de hacerlo.

Lo mismo ocurrirá si queremos agregar algún plugin que vemos en la web y está pensado para una versión diferente.

No existe ninguna solución genérica que permita resolver esto y, cada desarrollador deberá adaptar sus scripts a las nuevas reglas por lo tanto, si notan que algo no funciona con alguna de ellas, primero que nada, verifiquen si hay actualizaciones disponibles para esta versión.

Los cambios están enumerados en la página de jQuery y son abundantes.

Eventualmente, ellos recomiendan agregar un script extra que debe insertarse justo debajo de la librería y que cargará una serie de funciones que permitirán mostrar a los desarrolladores, cuál o cuales son los cambios que deberían hacer:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/jquery-migrate-1.0.0.js'/></script>

Según explican, el uso del plugin jQuery Migrate permite restaurar algunas de esas funciones eliminadas pero es una solución temporal y por lo que he visto, no parece funcionar siempre.

Un detalle extra: la versión 2 que saldrá muy pronto, dejará de dar soporte a las versiones 6,7 y 8 de Internet Explorer.

Resumiendo: mucho cuidado

trunk8 es un plugin para jQuery pensado para mostrar textos largos en espacios pequeños.

Una vez que lo descargamos desde la página del desarrollador y lo agregamos antes de </head&/gt; ya se copiándolo directamente entre etiquetas script, como haríamos con cualquier otro:

<script type='text/javascript'>
//<![CDATA[
  // acá pegamos el contenido del archivo
//]]>
</script>

o alojándolo en un servidor externo:

<script type='text/javascript' src='url_archivo'></script>

No requiere nada más que ejecutar la función para que funcione, indicándole la clase o id de la o las etiquetas que queremos truncar. Por ejemplo, si el texto estuviera en un div de este tipo:

<div id="ejemplo" class="truncar">
  ... cualquier texto ...
</div>

bastaría usar algo así:

$(document).ready(function() {
  $('#ejemplo').trunk8();
  // o bien esto otro si queremos hacer referencia a la clase
  $('.truncar).trunk8();
})

En Blogger y otros sitios, se suele usar un resumen de ciertas entradas pero este plugin sólo está pensado para textos así que si queremos usarlo para aplicarlo en etiquetas que contienen otras etiquetas (imágenes, formatos, enlaces, etc) lo que debemos hacer es modificar levemente el script. En lugar de la versión minimizada, conviene bajar la versión normal desde github y abrir el archivo con cualquier editor de textos.

Allí veremos esta línea:

this.original_text = this.$element.html();

y, simplemente, la cambiamos de este modo:

var elhtml = this.$element.html();
var eltxt = elhtml.replace(/<[^>]+>/g,'');
this.original_text = eltxt;

lo que hemos hecho es decirle al script que no use el texto sino que, primero, elimine las etiquetas.

Vamos a lo concreto, supongamos que tenemos un contenido como este:

<div class="truncar">
  ... cualquier contenido ...
</div>

Aunque posee una serie de opciones, me parece que, para usarlo en Blogger, sólo nos interesarán algunas de ellas. La más importante sería la que nos permite definir la altura; para eso, podemos elegir entre:

lines indica la cantidad de líneas de texto y debe ser un número (por defecto es 1)

$('.truncar').trunk8({
  lines: 5
});

pero, si el contenedor es complejo porque tiene propiedades CSS, es mejor utilizar otra opción llamada width que, por defecto es 'auto' y que nos permite establecer la cantidad de caracteres a mostrar

$('.truncar').trunk8({
  width:100
});

Más opciones:

fill es una cadena de texto (o etiquetas html) que se insertan al final y por defecto es '&hellip;' o sea, tres puntitos …

$('.truncar').trunk8({
  fill: '<span class="trunkfill"> ... y otras cosas</span>'
});

como en este ejemplo se usa una etiqueta con una clase (trunkfill) basta establecer una regla de estilo para ella para mostrarla de cualquier modo, diferenciándola del resto.

side nos permite seleccionar la forma en que se verá ese resumen y por defecto es 'right' o sea, se mostrarán una serie de palabras y al final los tres puntitos; pero podemos hacerlo al revés poniendo 'left' en cuyo caso, se mostrará el final del texto o bien 'center' y se mostrará un poco del inicio, los tres puntitos y un poco del final:

$('.truncar').trunk8({
  width:80,
  side:'center',
  fill: ' … '
});

Así como podemos utilizar cualquier etiqueta para agregar al final del texto, también podemos transformar esa etiqueta en un enlace que nos permita expandir o contraer su contenido, agregando un par de funciones extras:

$('.truncar').trunk8({
  tooltip: false,
  fill: ' … <a class="trunkmas" href="#">expandir</a>'
});

$(document).on('click', '.trunkmas', function(e){
  e.preventDefault();
  $(this).parent().trunk8('revert').append(' <a class="trunkmenos" href="#">colapsar</a>');
  return false;
});

$(document).on('click', '.trunkmenos', function(e){
  e.preventDefault();
  $(this).parent().trunk8();
  return false;
});

Nuevamente, como usamos etiquetas y clases, podemos estabelcer reglas de estilo para trunkmas y trunkmenos.

¿La última? Si ponemos el cursor encima de cualquiera de los divs, veremos que el tooltip nos muestra el contenido completo, eso, podemos eliminarlo con:

tooltip: false

Vintage Social Media Stamps
	Contiene 14 íconos de 256x256, en formato PNG. descargar

... direction-aware hover effect using CSS3 and jQuery ... difícil de traducir; pero digamos que dada una serie de rectángulos con imagenes, al poner el puntero del ratón encima de cada uno de ellos, se mostrará un texto superpuesto que aparecerá mediante una transición cuya dirección varia según donde estemos ... y como mi intento de explicarlo es más confuso que el original en inglés, mejor.

Veamos como se hace.

Requiere tres cosas, el CSS (funcionará sólo en navegadores que interpreten la propiedad transition), un script que funciona con jQuery y el HTML que no es otra cosa que una lista.

Empezamos con el HTML, como dije, una lista (etiqueta UL) donde cada item (etiqueta LI) contiene un enlace con una imagen que es la que veremos por defecto y un DIV con un texto que es el que se verá al poner el puntero del cursor encima:

<ul id="da-thumbs" class="da-thumbs">
  <li>
    <a href="url_enlace" target="_blank">
      <img src="url_imagen" />
      <div>
        <span>el texto a mostrar</span>
      </div>
    </a>
  </li>
  <!-- ... y seguimos agregando imágenes y textos con la misma estructura -->
</ul>

Debajo de eso, colocamos el llamado a la función:

<script type="text/javascript">
  $(function() {$('#da-thumbs > li').hoverdir();});
</script>

Y ahora, la función que podemos colocarla antes del </head> y que podemos descargar desde la página del desarrollador junto con los ejemplos.

(function( $, undefined ) {
  $.HoverDir = function( options, element ) {
    this.$el = $( element );
    this._init( options );
  };
  $.HoverDir.defaults = {hoverDelay : 0,reverse : false};
  $.HoverDir.prototype = {
    _init : function( options ) {
      this.options = $.extend( true, {}, $.HoverDir.defaults, options );
      this._loadEvents();
    },
    _loadEvents : function() {
      var _self = this;
      this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) {
        var $el = $(this),
          evType = event.type,
          $hoverElem = $el.find( 'div' ),
          direction = _self._getDir( $el, { x : event.pageX, y : event.pageY }),
          hoverClasses= _self._getClasses( direction );
        $hoverElem.removeClass();
        if( evType === 'mouseenter' ) {
          $hoverElem.hide().addClass( hoverClasses.from );
          clearTimeout( _self.tmhover );
          _self.tmhover = setTimeout( function() {
            $hoverElem.show( 0, function() {$(this).addClass( 'da-animate' ).addClass( hoverClasses.to );});
          }, _self.options.hoverDelay );
        } else {
          $hoverElem.addClass( 'da-animate' );
          clearTimeout( _self.tmhover );
          $hoverElem.addClass( hoverClasses.from );
        }
      });
    },
    _getDir : function( $el, coordinates ) {
      var w = $el.width(),
        h = $el.height(),
        x = ( coordinates.x - $el.offset().left - ( w/2 )) * ( w > h ? ( h/w ) : 1 ),
        y = ( coordinates.y - $el.offset().top  - ( h/2 )) * ( h > w ? ( w/h ) : 1 ),
        direction = Math.round( ( ( ( Math.atan2(y, x) * (180 / Math.PI) ) + 180 ) / 90 ) + 3 )  % 4;
      return direction;
    },
    _getClasses      : function( direction ) {
      var fromClass, toClass;
      switch( direction ) {
        case 0:
          ( !this.options.reverse ) ? fromClass = 'da-slideFromTop' : fromClass = 'da-slideFromBottom';
          toClass = 'da-slideTop';
          break;
        case 1:
          ( !this.options.reverse ) ? fromClass = 'da-slideFromRight' : fromClass = 'da-slideFromLeft';
          toClass = 'da-slideLeft';
          break;
        case 2:
          ( !this.options.reverse ) ? fromClass = 'da-slideFromBottom' : fromClass = 'da-slideFromTop';
          toClass = 'da-slideTop';
          break;
        case 3:
          ( !this.options.reverse ) ? fromClass = 'da-slideFromLeft' : fromClass = 'da-slideFromRight';
          toClass = 'da-slideLeft';
          break;
      };
      return { from : fromClass, to: toClass };
    }
  };
  var logError = function( message ) {if ( this.console ) {console.error( message );}};
  $.fn.hoverdir = function( options ) {
    if ( typeof options === 'string' ) {
      var args = Array.prototype.slice.call( arguments, 1 );
      this.each(function() {
        var instance = $.data( this, 'hoverdir' );
        if ( !instance ) {
          logError( "cannot call methods on hoverdir prior to initialization; " + "attempted to call method '" + options + "'" );
          return;
        }
        if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
          logError( "no such method '" + options + "' for hoverdir instance" );
          return;
        }
        instance[ options ].apply( instance, args );
      });
    }  else {
      this.each(function() {
        var instance = $.data( this, 'hoverdir' );
        if ( !instance ) {
          $.data( this, 'hoverdir', new $.HoverDir( options, this ) );
        }
      });
    }
    return this;
  };
})( jQuery );

Y por último, la clave, como siempre, es el CSS que agregamos donde más nos guste:

<style>
  .da-thumbs {margin: 0 !important}
  .da-thumbs li { /* cada item */
    background: #FFF; /* color de fondo para el borde */
    float: left;
    margin: 5px; /* separación entre items */
    padding: 8px; /* padding como borde */
    position: relative;
  }
  .da-thumbs li a, .da-thumbs li a img {
    display: block;
    height: 137px; /* el alto de la imagen */
    position: relative;
    width: 185px; /* el ancho de la imagen */
  }
  .da-thumbs li a {overflow: hidden;}
  .da-thumbs li a div { /* el contenedor de los textos */
     background: rgba(75,75,75,0.7); /* un poco de opacidad */
     height: 100%;
     position: absolute;
     width: 100%;
  }
  .da-thumbs li a div span { /* el texto en si mismo */
    color: #FFF;
    display: block;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    margin: 15px 10px;
    padding: 10px 0;
    text-align: center;
  }
  .da-thumbs li a div.da-animate { /* la animación del hover */
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  /* la posición inicial de los textos ocultos */
  .da-slideFromTop {left: 0; top: -100%;}
  .da-slideFromBottom {left: 0; top: 100%;}
  .da-slideFromLeft {top: 0; left: -100%;}
  .da-slideFromRight {top: 0; left: 100%;}
    /* la posición final */
  .da-slideTop {top: 0;}
  .da-slideLeft {left: 0;}
</style>

REFERENCIAS:codrops

Aunque los caracteres en formato Unicode parezcan algo estrafalario, en cualquier plantilla de Blogger los vemos por varios lados. El más común es la comilla simple que en HTML se escribe &#39; pero hay otros, por ejemplo &#160; para espacios forzosos, &#161; y &#191; para los signos de abren admiraciones o interrogaciones, etc.

En realidad, cualquier texto puede ser escrito de ese modo, hasta un simple HOLA:

HOLA

Siempre tienen el mismo formato, el caracter & seguido del caracter # y un número decimal que es el código Ascii pero que no está limitado a los 256 tradicionales sino que se extiende abarcando cientos de otros números aunque algunos de ellos no serán visibles o se verán mal.

Blogger también usa unas "flechas especiales", caracteres que, por ejemplo, se ven en el gadget de Archivos: &#9658; y &#9660;:

◄▲►▼

Esta es una lista parcial de distintos caracteres de flechas que también pueden ser utilizados. Poniendo el cursor encima, se verá el formato requerido:

⇐⇑⇒⇓⇠⇡⇢⇣

⇚⤊⇛⤋⤌⤍⤎⤏

⇇⇈⇉⇊↢↤↥↦

↞↟↠↡⇦⇧⇨⇩

☜☝☞☟←↑→↓

Algunas no tienen las cuatro direcciones:

⇽⇾≪≫⇜⇝☚☛⧼⧽

Y otras sólo tienen una:

➩➪➫➬➭➮➯➱

➡⟿➔➜➝➞➟➠➡➢➣➤➧➨➲➵➺➻➼➽➾

Que alguna de las direcciones no exista como carácter individual no es problema ya que usando CSS podemos rotarlo en cualquier dirección; por ejemplo, si tomamos esta flecha hacia la derecha: &#10140;, lo transformamos en una flecha a la izquierda con:

transform:rotateY(180deg);

Y flechas hacia arriba y hacia abajo con:

transform:rotate(-90deg);
transform:rotate(90deg);

Sin olvidarnos que algunos navegadores requieren los prefijos específicos para estas transformaciones.

➜➜➜➜

Esta es una solución genérica y 100% garantizada para aquellos administradores que aun están preocupados por la forma en que se ven su sitios web en Internet Explorer 6 (sí, aún hay):

<!--[if IE6]>
  <style type="text/css">
    body { display: none; }
  </style>
<![endif]-->

No. No es en serio, debo aclararlo por las dudas ya que nunca se sabe; sólo es uno de las tantas bromas publicadas en csshumor.com/
¿Más?

#Merry.Christmas { text-decoration: blink !important; }

.motivation .monday { display: none; }

.ideal-job { stress: 0; richness: 100; }

#internet .comments {text-transform: uppercase;}

En fin. No abusemos ... y no pregunten dónde se coloca:

.titanic {
 overflow: auto;
 transform: rotate(90deg);
 page-break-after: always;
 float: none;
 z-index: 0;
 visibility: hidden;
 display: none;
 position: fixed;
}

REFERENCIAS:@CSSHumor

A veces, cuando se usan scripts, debemos escribir caracteres especiales como acentos y estos no se ven bien o aparece un signo de interrogación u otros símbolos raros. Por lo general, esto se resuelve si la codificación de caracteres es correcta pero lo lógico no siempre funciona.

En Blogger, los caracteres especiales suelen verse bien por lo que ese problema es difícil que se nos presente pero, cuando se trata de otros servicios, de archivos externos, las cosas pueden complicarse, sobre todo si queremos emplear caracteres especiales [1 2]

Por ejemplo, esto, suele verse bien y al hacer click en este enlace, se verán las letras de modo correcto:

alert(" á é í ó ú  ☺ ❤ ✛ ");

Si no es así y quiero usar caracteres de ese tipo, lo que debo hacer es escribirlos en un formato especial, las llamadas cadenas de escape que no son otra cosa que una barra invertida seguida de una letra y un número en formato hexadecimal. En el caso de los acentos o caracteres comunes, sería \x más el código Unicode de dos dígitos:

\xe1 es la letra á
\xe9 es la letra é
\xed es la letra í
\xf3 es la letra ó
\xfa es la letra ú

Algunas combinaciones generan caracteres especiales:

\n es un salto de linea
\t es una tabulación
\' es la forma de escribir comillas simples
\" es la forma de escribir comillas dobles
\\ es una barra invertida

De manera más genérica, podemos usar \u más el código Unicode en formato hexadecimal (cuatro dígitos):

\u00e1 es la letra á
\u00e9 es la letra é
\u00ed es la letra í
\u00f3 es la letra ó
\u00fa es la letra ú

lo que nos permitirá ver correctamente eso que antes no se podía:

alert(" \u263a \u2764 \u271b ");

En esta página, hay una lista muy completa de todos los caracteres, tanto símbolos como distintos alfabetos.

Aunque en el CSS no suelen usarse caracteres raros, hay un caso en que también son necesarios, cuando se utiliza la propiedad content junto con :after y :before

Allí, se usa el mismo criterio aunque sólo es necesario agregar la barra invertida seguida de los cuatro dígitos del código hexadecimal. Por ejemplo:

content: ":\24d1\24d4\24d5\24de\24e1\24d4";

content: ":after  \263a  \2724  \2602";

:after ☺ ✤ ☂
:ⓑⓔⓕⓞⓡⓔ

Wifun Icons
	Contiene 30 íconos de distintos tamaños, en formato PNG. descargar

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