Inicio > Diseño web > Animando con HTML5 y CSS3 I

Animando con HTML5 y CSS3 I

animacion-1.0
Vaya este es una especie de experimento para conocer los límites del HTML5 y CSS3, en este caso dibujando sin hacer uso del canvas y luego animando!

Esto funciona bien en Firefox y Chrome, talves IE10 (alguien me ayuda a verificar?)

La idea es digujar el clásico monito con baceza de círculo, cuerpo, brazos y piernas con una línea y bueno el reto es ya que no estoy usando el canvas.

La idea es usar puros DIV’s, con la finalidad de posteriormente poder colocar texturas por medio de imagenes de fondo, pero eso será en otra ocasión.

Creo que primero debería de animar una caja simple, pero hay que pensar en grande!!

Maketado a la obra…

Después de unos momentos he logrado obtener lo siguiente:

<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="Ricardo Torres">
<title>Animación</title>
<style type="text/css">
	div#contenedor {
		width: 700px;
		height: 700px;
		margin: 0 auto;
		border: 1px solid #333;
		position: relative;
	}
	
	.cabeza {
		width: 100px;
		height: 100px;
		border-radius: 50px;
		border: 2px solid #333;
		position: absolute;
		top: 50px;
		left: 50px;
	}
	
	.cuerpo {
		width: 0px;
		height: 200px;
		border: 2px solid #333;
		position: relative;
		left: 50%;
		right: 50%;
		top: 100px;
	}
	
	.brazo_izq {
		width: 150px;
		height: 0px;
		border: 2px solid #333;
		position: absolute;;
		left: 50px;
		top: 130px;
		transform:	rotate(60deg);
		transform-origin: left bottom;
		-ms-transform:	rotate(60deg);
		-ms-transform-origin: left bottom;
		-webkit-transform: rotate(60deg);
		-webkit-transform-origin: left bottom;
	}

	.brazo_der {
		width: 150px;
		height: 0px;
		border: 2px solid #333;
		position: absolute;;
		right: 46px;
		top: 130px;
		transform:	rotate(-60deg);
		transform-origin: right bottom;
		-ms-transform:	rotate(-60deg);
		-ms-transform-origin: right bottom;
		-webkit-transform: rotate(-60deg);
		-webkit-transform-origin: right bottom;
	}

	.pierna_izq {
		width: 150px;
		height: 0px;
		border: 2px solid #333;
		position: absolute;;
		left: 50px;
		top: 300px;
		transform:	rotate(60deg);
		transform-origin: left bottom;
		-ms-transform:	rotate(60deg);
		-ms-transform-origin: left bottom;
		-webkit-transform: rotate(60deg);
		-webkit-transform-origin: left bottom;
	}

	.pierna_der {
		width: 150px;
		height: 0px;
		border: 2px solid #333;
		position: absolute;;
		right: 46px;
		top: 300px;
		transform:	rotate(-60deg);
		transform-origin: right bottom;
		-ms-transform:	rotate(-60deg);
		-ms-transform-origin: right bottom;
		-webkit-transform: rotate(-60deg);
		-webkit-transform-origin: right bottom;
	}
	
	@keyframes corre {
		0%		{
					transform: scale(0.5);
				}

		33%	{
					transform: rotate(30deg) scale(0.5);
					transform-origin: center 150px;
				}
		85%	{
					transform: rotate(30deg) scale(0.5);
					transform-origin: center 150px;
					left: 600px;
				}
		100%	{
					transform: rotate(720deg) scale(0.5);
					transform-origin: center 150px;
					left: 600px;
				}
	}
	
	@-webkit-keyframes corre {
		0%		{
					-webkit-transform: scale(0.5);
				}

		33%	{
					-webkit-transform: rotate(30deg) scale(0.5);
					-webkit-transform-origin: center 150px;
				}
		85%	{
					-webkit-transform: rotate(30deg) scale(0.5);
					-webkit-transform-origin: center 150px;
					left: 600px;
				}
		100%	{
					-webkit-transform: rotate(720deg) scale(0.5);
					-webkit-transform-origin: center 150px;
					left: 600px;
				}
	}
	
	.cabeza {
		transform: scale(0.5);
		-webkit-transform: scale(0.5);
		animation: corre 3s;
		-webkit-animation: corre 3s;
	}	
</style>
</head>
<body>
	<div id="contenedor">
		<section class="cabeza">
			<div class="cuerpo"></div>
			<div class="brazo_izq"></div>
			<div class="brazo_der"></div>
			<div class="pierna_izq"></div>
			<div class="pierna_der"></div>
		</section>
	</div>
</body>
</html>

el resultado es muy agradable, mi personaje simplemente rompe la barrera del sonido de lo rápido que se desplaza y además puedo mover todo mi personaje como un sólo objeto.

Me gustaría ponerle texturas o piel o… la ideas comienzan a surgir!

Si tienen sobrinos (como en mi caso) creo que una buena opción es poner a los pequeños a que pinten sus propios personajes!

Anuncios
  1. 9 junio, 2013 en 00:38

    Muy buen código aunque te falto:

    Aunque no es tan necesario para que el código funcione pero es importante para los desarrolladores xD

    Saludos!

    • 9 junio, 2013 en 01:53

      Hi L_Montes!

      Haaa gracias por los comentarios, pero que me falto? me perdí!!!

      • 19 junio, 2013 en 23:49

        Dam! me eliminaron mi: meta name= autor content= Ricardo Torres

        Por eso decia que es importante para los desarrolladores xD

  2. 20 junio, 2013 en 09:41

    Haaa!! ahora si, gracias! 😉 (actualizado!!) muy cierto por cierto!

  3. juan
    29 julio, 2013 en 20:09

    muy bueno y en internet explorer 10 se ve muy bien, saludos

    • 29 julio, 2013 en 20:56

      Hola!

      hey gracias por el aporte del IE10

      Salu2+

  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

PiKon

3D Printing + Raspberry Pi Camera = PiKon Telescope

gvSIG blog

gvSIG project blog

Python Adventures

Welcome to the Jungle!

A %d blogueros les gusta esto: