[CSS] El segundo elemento - con DIV + CSS3 pintura Ultraman (paso detallado)

Usando sólo div diseño que el cuerpo, con las esquinas redondeadas y una variedad de atributos CSS3 transformar para dibujar la forma de cada parte, por supuesto, no va a usar ninguna de las imágenes oh. No tiene sentido.
Algunos estudiantes dicen, no puede utilizar lienzo de pintura más realista y más simple? También muy de acuerdo con este punto, pero mi razón es, no tiene sentido.

La escritura se detalla, arrancó todas las distintas partes del análisis.

GitHub Portal: https://github.com/lancer07/css3Ultraman

El primer paso: perfil de la cabeza

<header></header>

.ultraman header {
  border: 7px solid #000;
  border-top: 15px solid #000;
  width: 200px;
  height: 200px;
  border-radius: 50% 50% 60% 60%;
  position: absolute;
  background: #fff;
}

Segundo paso: A pesar de que se trata el cabello

<header>
    <div class="hair"></div>        
</header>

.ultraman header .hair {
  position: absolute;
  top: -40px;
  left: 80px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 140px solid #000;
  border-radius: 30% 30% 50% 50%;
}

El tercer paso: Ojos

<header>
    <div class="hair"></div>
    <div class="left_eye"></div>
    <div class="right_eye"></div>
</header>

Debido a que era menos escribir bien, en primer lugar definir la vista de clase, y luego generamos dos ojos

.eye(@l,@r,@deg){
    border:5px solid #000;
    width:70px;
    height:70px;
    background:#ffc30a;
    border-radius:@l @r;
    transform:rotate(@deg);
    position:absolute;
    top:60px;
}
.left_eye{
    .eye(50%,80%,-15deg);
    left:10px;
}
.right_eye{
    .eye(80%,50%,15deg);
    right:10px;
}

Paso cuatro: oído

<header>
    <div class="hair"></div>
    <div class="left_eye"></div>
    <div class="right_eye"></div>
    <div class="left_ear"></div>
    <div class="right_ear"></div>
</header>

.ear(@deg){
    width:20px;
    height:50px;
    border:5px solid #000;
    position:absolute;
    top:70px;
    z-index:-1;
    transform:rotate(@deg);
    background:#fff;
}
.left_ear{
    .ear(-7deg);
    left:-20px
}
.right_ear{
    .ear(7deg);
    right:-20px
}

Paso cinco: pequeño cuerpo

<div class="body">
    <div class="light"><span></span></div>
</div>

Hay un cuerpo de luz, el tiempo se ha terminado, se emitirá un sonido bip bip bip llamada, por lo que añadir un efecto de animación

@keyframes jump{
    0%{
        background:#48e1e7;
    }
    50%{
        background:#961e1e;
    }
    100%{
        background:#48e1e7;
    }
}

.body{
        width:100px;
        height:80px;
        background:#fff;
        border:7px solid #000;
        position:absolute;
        top:180px;
        left:50px;
        border-radius:0 0 20% 20%;
        z-index:-1;
        .light{
            width:40px;
            height:40px;
            border:3px solid #000;
            position:relative;
            top:20px;
            left:30px;
            background:red;
            transform:rotate(-45deg);
            span{
                width:8px;
                height:8px;
                border:2px solid #000;
                background:#48e1e7;
                display:block;
                position:absolute;
                left:3px;
                top:26px;
                border-radius:50%;
                z-index:2;
                animation:jump 0.5s infinite;
            }
        }
    }

Sexto paso: Mano

<div class="left_hand"></div>
<div class="right_hand"></div>

Siempre y cuando la rotación mire como una mano, que una cruz

.hand{
        width:30px;
        height:100px;
        border-radius:60% 60% 50% 50%;
        border:7px solid #000;
        position:absolute;
        background:#fff;
    }
    .left_hand{
        .hand;
        top:160px;
        left:30px;
    }
    .right_hand{
        .hand;
        top:160px;
        left:90px;
        transform:rotate(-90deg);
    }

Séptimo paso: los pantalones

<div class="trousers"></div>

.trousers{
    border:7px solid #000;
    position:absolute;
    background:red;
    width:100px;
    height:45px;
    top:240px;
    left:50px;
    z-index:-2;
    border-radius:0 0 15% 15%;
}

Paso ocho: Piernas

<div class="left_footer"></div>
<div class="right_footer"></div>
<div class="egg"></div>

En cuanto a lo que el huevo, no voy a entrar en detalles.

.footer{
        width:34px;
        height:80px;
        border-radius:50% 50% 60% 60%;
        border:7px solid #000;
        position:absolute;
        background:#fff;
        z-index:-3;
    }
    .left_footer{
        .footer;
        left:46px;
        top:260px;
        transform:rotate(20deg);
    }
    .right_footer{
        .footer;
        right:20px;
        top:270px;
        transform:rotate(-50deg);
    }
    .egg{
        background:#75d8f9;
        width: 18px;
        height: 30px;
        top: 286px;
        left: 97px;
        position: absolute;
        border-radius: 50%;
        border-top:7px solid #000;
    }

rebajar

Bienvenido a Tucao