Packman o Comecocos en puro Css 10.3.12
Packman o Comecocos en puro Css
Un puro experimento lúdico, jugando con las @keyframes de Css3 y sus animations. Plénamente funcional en Firefox.
El webkit sigue sin soportar las @keyframes en los pseudoelementos. Así que se pierde el abrir y cerrar la boca del Comecocos y el movimiento de las patitas y las pupilas de los ojos de los tres fantasmas. En IE9 se ven las formas pero nada se mueve. Más no he podido testear.
Todo lo anterior en Vista.
Agradezco comentarios sobre cómo se ve en otras situaciones diferentes (SO y navegadores) Gracias y a divertirse recordando tiempos pasados xD
Comecocos o Packman en puro Css
/* Comecocos o Packman por Kseso
http://ksesocss.blogspot.com/2012/03/packman-o-comecocos-en-puro-css.html
RECUERDA: hoy por hoy Chrome no anima los pseudoelementos.
REMEMBER: Chrome dosen´t animate pseudo-elements
*/Como esto es blogger, para poder visualizar bien el Comecocos Css a pie de página a todo lo ancho, está en fixed y bottom.
Solucionado Ouch!!! Hay una pequeña colisión de estilos, así que no pases el ratón por el comecocos, ¡que no lo pases!. Anda, no será que no te lo advertí =P .
Bueno si quieres verlo sin interferencias de blogger te doy a elegir: en Jsfiddle o en CodePenIO Ahí tienes todos los códigos.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
lo he comprobado en varios navegadores: funciona bien en firefox (aunque al abrir y cerrar la boca, se mueve una línea fina en la parte superior); en chrome no se mueve la boca pero lo demás funciona bien; en internet explorer 7, no se anima ni se gira ni se aplican los bordes ni sombras ni degradados, en IE 8, igual que en IE 7, pero sí que se giran; en IE 9, igual que en IE8, pero sí que se aplica el borde, y en IE 10, solo se desplaza de izquierda a derecha sin mover la boca, ni los pulpos mueven las patas, y, no se si esto sera por mi ordenador, se entrecorta la animación.
ResponderEliminarGracias Jorge por pararte a testearlo tan a fondo.
ResponderEliminarComo decía al publicarlo (hace más de un año) era sólo un experimento lúdico. Sin más pretensión que jugar un rato con las animaciones css (y con las particularidades a su soporte).
Sólo un apunte ;-) ¿IE8? uff!!! xD
Un saludo