Easter eggs "huevos de pascua"Google 2011

[DoggyDog]

Estaba aburridito, así que en 8 segundos, creé un código que CONVIERTE EN GOOGLE A CUALQUIER PÁGINA

 
 
 

[JaiMe]

:-)

jeje excelente

esta parte es la que contrala el numero de giros  moz-animation-iteration-count: 1

Es el poder de las transformaciones en CSS3, solo agregarle la clase a un elemento es necesario. Por ejemplo este solo anima los avatares:

Código: [Seleccionar]

javascript:(function(){var a=document.createElement("style");a.setAttribute("type","text/css");document.getElementsByTagName("head")[0].appendChild(a);var b="@-webkit-keyframes roll { from { -webkit-transform: rotate(0deg) } to { -webkit-transform: rotate(360deg) } } @-moz-keyframes roll { from { -moz-transform: rotate(0deg) } to { -moz-transform: rotate(360deg) } } @keyframes roll { from { transform: rotate(0deg) } to { transform: rotate(360deg) } } .avatar { -moz-animation-name: roll; -moz-animation-duration: 4s; -moz-animation-iteration-count: 1; -webkit-animation-name: roll; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 1; }";a.appendChild(document.createTextNode(b))})()
Antes se tenia que hacer un monton de interpolaciones entre las coordenadas para una simple animacion.

Edit:

Este anima las imagenes

Código: [Seleccionar]

javascript:(function(){var a=document.createElement("style");a.setAttribute("type","text/css");document.getElementsByTagName("head")[0].appendChild(a);var b="@-webkit-keyframes roll { from { -webkit-transform: rotate(0deg) } to { -webkit-transform: rotate(360deg) } } @-moz-keyframes roll { from { -moz-transform: rotate(0deg) } to { -moz-transform: rotate(360deg) } } @keyframes roll { from { transform: rotate(0deg) } to { transform: rotate(360deg) } } img { -moz-animation-name: roll; -moz-animation-duration: 4s; -moz-animation-iteration-count: 7; -webkit-animation-name: roll; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 7; }";a.appendChild(document.createTextNode(b))})()

Funciona en Firefox, pero hay que correrlo desde la consola.

[DoggyDog]

:-)

Es el poder de las transformaciones en CSS3, solo agregarle la clase a un elemento es necesario. Por ejemplo este solo anima los avatares:

Código: [Seleccionar]

javascript:(function(){var a=document.createElement("style");a.setAttribute("type","text/css");document.getElementsByTagName("head")[0].appendChild(a);var b="@-webkit-keyframes roll { from { -webkit-transform: rotate(0deg) } to { -webkit-transform: rotate(360deg) } } @-moz-keyframes roll { from { -moz-transform: rotate(0deg) } to { -moz-transform: rotate(360deg) } } @keyframes roll { from { transform: rotate(0deg) } to { transform: rotate(360deg) } } .avatar { -moz-animation-name: roll; -moz-animation-duration: 4s; -moz-animation-iteration-count: 1; -webkit-animation-name: roll; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 1; }";a.appendChild(document.createTextNode(b))})()
Antes se tenia que hacer un monton de interpolaciones entre las coordenadas para una simple animacion.

[mega]

:-)

Es el poder de las transformaciones en CSS3, solo agregarle la clase a un elemento es necesario. Por ejemplo este solo anima los avatares:

Código: [Seleccionar]

javascript:(function(){var a=document.createElement("style");a.setAttribute("type","text/css");document.getElementsByTagName("head")[0].appendChild(a);var b="@-webkit-keyframes roll { from { -webkit-transform: rotate(0deg) } to { -webkit-transform: rotate(360deg) } } @-moz-keyframes roll { from { -moz-transform: rotate(0deg) } to { -moz-transform: rotate(360deg) } } @keyframes roll { from { transform: rotate(0deg) } to { transform: rotate(360deg) } } .avatar { -moz-animation-name: roll; -moz-animation-duration: 4s; -moz-animation-iteration-count: 1; -webkit-animation-name: roll; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 1; }";a.appendChild(document.createTextNode(b))})()
Antes se tenia que hacer un monton de interpolaciones entre las coordenadas para una simple animacion.

el que sabe se divierte thank 
me quebre la cabeza encontrando la diferencia jeje .avatar

[Unforgiven]

vayan y pongan zerg rush y vean como su pantalla es atacada por las O que tienen que destruir dandoles click, inspirado por starcraft

[TK!]

vayan y pongan zerg rush y vean como su pantalla es atacada por las O que tienen que destruir dandoles click, inspirado por starcraft

ta bonito... me llegó el doodle de hace 2 dias creo, el del zipper =)