Dibujar y animar un Rinnegan con CSS3

Hola a todos, para cerrar ésta serie de tutoriales "otakus" crearemos hoy un Rinnegan como les había comentado al final del último tutorial. Ahora bien, la imagen de lo que queremos lograr:

Les recuerdo que el código CSS de éste tutorial requiere del HTML/CSS del primer Sharingan, así como para hacerlo más breve se recomienda agregar prefixfree:

Código :

<!DOCTYPE html>
<html lang="es">
   <head>
      <meta charset="utf-8"/>
      <title>Rinnegan CSS3</title>
      <!-- Código principal del Sharingan -->
      <link rel="stylesheet" type="text/css" media="all" href="sharingan.css"/>
      <!-- Código del Rinnegan CSS3 -->
      <link rel="stylesheet" type="text/css" media="all" href="rinne.css"/>
      <script type="text/javascript" src="prefixfree.min.js"></script>

   
         
<body>
      <!--Borde negro exterior-->
      <div id="sharingan">
         <!--Iris --> 
         <ul>
            <!--Pupila-->
            <li>   </li>

            <!-- Primer anillo -->
            <li class="ring">   </li>
               
            <!--Segundo Anillo -->
            <li class="aspa sup">&nbsp;<p>&nbsp;</p></li>
            <!-- Tercer Anillo -->
            <li class="aspa der">&nbsp;<p>&nbsp;</p></li>
            <!--Este elemento se oculta con CSS-->
            <li class="aspa izq">&nbsp;<p>&nbsp;</p></li>
         </ul>
      </div>
   

</body>
</html>

Continuamos con los estilos:

Código :

/*---------------Rinnegan---------------*/

/*Gradiente lineal que recrea el tono de color del Rinnegan  */
ul,ul:hover {
      background: linear-gradient(top, #8d7f9a 0%,#8f849c 14%,#90899e 29%,#9394a2 43%,#9499a4 57%,#969fa6 71%,#97a3a8 86%,#97a4a8 100%);
}

/*Cambiando el color de fondo de .aspa y .aspa p (puntas de las aspas) a 
transparente,ésto al hacer :hover */
ul:hover .aspa, ul:hover .aspa p {
   background-color:transparent;
}

/*Estilos para la pupila del Rinnegan */
ul li:first-child {
    background: #000;
    border: 1px solid #000;
   top: 107px;
   width: 11px;
    height: 11px;
    box-shadow: none;
    transform: none;
}

/*Escalando la pupila(li:first-child) al hacer 
ul:hover (la transición se añadió en la hoja de
estilos sharingan.css) */
ul:hover li:first-child {
   transform:scale(1.7);
}

/*Borde de cada uno de los anillos*/
.ring,.sup,.der {
   border: 5px solid #000;
}

/*Ahora se reposicionara y ajustara su anchura/altura,para darle forma a los 3 anillos 
concéntricos que conforman al Rinnegan*/

/*Primer Anillo (mas cercano a la pupila)*/
.ring {
   top: 65px;
    left: 48.3px;
    width: 59px;
    height: 59px;
    transform:none;
}

/*El aspa superior se convierte en el segundo
anillo*/
.sup {
   top: -39px;
    left: 14px;
    width: 126px;
    height: 126px;
    border-radius: 68px 68px 68px 68px / 64px 64px 64px 64px;
}

/*El aspa derecha se convierte en el tercer
anillo*/
.der {
   top: -205px;
    left: -22px;
    width: 196px;
    height: 186px;
    border-radius: 107px 107px 107px 107px;
    transform: none;
}

/*Las 3 siguientes reglas CSS añaden una serie de
transiciones para recrear la dilatación de la pupila
del Rinnegan escalando sus anillos con transform:scale()*/
ul .sup,ul:hover .sup,ul .der,ul:hover .der {
   transition:transform 1s cubic-bezier(0, 1, 1, 2);
}

ul:hover .sup {
   transform:scale(1.3);
}

ul:hover .der {
   transform:scale(1.1);
}

/*Ocultando el aspa izquierda ya que no es necesaria*/
.izq {
   display: none;
}

/*Por si acaso,hay inhabilitar las animaciones
del primer sharingan*/
ul:hover .sup,ul:hover .der,ul:hover .izq {
   animation:none;
}

Como les había mencionado, con algunas modificaciones al código del primer tutorial tenemos un Rinnegan que fue testeado en Chrome, Firefox y Opera, se puede acceder a un ejemplo en vivo desde aquí.

Bueno, espero que les hayan gustado mis tutoriales, pueden hacer fork desde mi repositorio en github, así como cualquier sugerencia, consejo o crítica será bien recibida.

P.S: Lean y vean mucho Manga/Anime, algunos tienen más trama que muchas telenovelas latinoamericanas

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Dibujar y animar un Rinnegan con CSS3

Publica tu comentario

o puedes...