Tutoriales Ubuntu


Visto: 706 Views

Sharingan animado con CSS3

sharingan-de-3-aspas-1339431199_full550


Sharingan animado con CSS3

sharingan-de-3-aspas-1339431199_full550

sharingan-de-3-aspas-1339431199_full550

En un post anterior les mostre como crear un rinnegan con css3 en esta ocacion les mostrare como crear un sharingan con css3 igualmente el autor de este efecto es Lord Caos asi que empezamos.

La imagen anterior expone el objetivo (es decir, crear algo lo más parecido pero no idéntico  ) y cómo estará estructurado. Cabe decir que éste tutorial tiene como fin ser un experimento CSS3, antes de continuar sería mucho mas breve el código CSS si se utiliza prefixfree, hay un artículo que explica de qué trata eso. A continuación el HTML:

Dividiremos el CSS en dos partes, la primera con los estilos para hacer el ojo en su estado inactivo/activo (al hacer :hover se mostrará como está en la primera imagen) y la segunda parte la animación CSS para mover las aspas de forma más o menos circular.
Un demo del efecto Ejemplo del efecto

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!DOCTYPE html>
<html lang="es">
   <head>
      <meta charset="utf-8"/>
      <title>Sharingan pure CSS3</title>
      <link rel="stylesheet" type="text/css" media="all" href="sharingan.css"/>
      <script type="text/javascript" src="prefixfree.min.js"></script>
 
<body>
   <!--Borde negro exterior-->
      <div id="sharingan">
         <!--Iris --> 
         <ul>
            <!--Pupila-->
            <li>   </li>
 
            <!-- Anillo que completa al iris-->
            <li class="ring">   </li>
 
            <!--Aspas del Sharingan -->
            <li class="aspa sup">&nbsp;<p>&nbsp;</p></li>
            <li class="aspa der">&nbsp;<p>&nbsp;</p></li>
            <li class="aspa izq">&nbsp;<p>&nbsp;</p></li>
         </ul>
      </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

/*div que agrupa todos los elementos a utilizar y que sirve
como borde negro exterior*/
div#sharingan {
       height: 226px;
       width: 255px;
       margin: 0 auto;
       padding: 5px 0;
       border:1px solid;
       background: #000;
       box-shadow:0px 0px 24px rgba(0,0,0,0.6);
       border-radius: 132px / 117px 117px 117px 117px;
   }
 
   /*Elemento ul con borde circular y que será una parte del iris, 
   pero en su forma inactiva tiene un fondo de color #5A6992 
   luego al hacer hover en el cambia a #B20000, color típico 
   del sharingan.
 
   Está posicionado de forma relativa, tiene una serie 3 box-shadow
   para recrear una forma esférica un poco más realista y finalmente
   una transición CSS3 para la propiedad background-color */
   ul {
       /*Aquí pueden usar otros colores excepto el rojo 
       por ejemplo: #383838 */
       background-color: #5A6992;
       margin: 0 0 0 8px;
       width: 199px;
       height: 224px;
       position: relative;
       top: 1px;
       border-radius: 139px 139px 139px 139px / 124px 124px 124px 124px;
       box-shadow:3px 0px 58px rgba(255,255,255,0.5) inset,0px 0px 20px rgba(255,255,255,0.1) inset,0px 0px 9px 7px rgba(0,0,0,1);
       transition:background 0.5s ease-in;
   }
 
   ul:hover {
      background-color: #B20000;
   }
 
      ul li {
         list-style:none;
         position: relative;
         background: transparent;
      }
 
      /*Pupila*/
          ul li:first-child {
          background:#000;
          left: -9%;
          top: 39%;
          width: 51px;
          height: 51px;
          margin: 0 auto;
          box-shadow: 0 0 25px rgba(0,0,0,0.7);
          border-radius: 68px / 64px;
          /*Escalado a 0.5 ya que es el tamaño de la pupila en su estado
          normal y una transición con cubic-bezier(0, 1, 1, 2) para darle
          un efecto bounce*/
          transition:transform .5s cubic-bezier(0, 1, 1, 2);
          transform:scale(0.5);
      }
 
      /*Transición de la pupila al hacer :hover, que con transform:scale(1) 
      devuelve a li:first-child a su escala original y con el efecto rebote
      ya mencionado */   
      ul:hover li:first-child {
         transition:transform .5s cubic-bezier(0, 1, 1, 2);
         transform:scale(1);
      }
 
      /*Ultima parte del iris, .ring es el anillo por
      el que se moverán de forma circular las aspas 
      del sharingan,con una transición de la propiedad
      transform para cuando vuelva a su estado original. */
      .ring {
          top: 0;
          left: 9%;
          height: 125px;
          width: 125px;
          box-shadow: 0 0 74px rgba(255, 255, 255, 0.3), 0 0 17px rgba(255, 255, 255, 0.3) inset,0 0 5px rgba(0,0,0,0.3) inset;
          border-radius: 70px 70px 70px 70px;
          transition:transform 0.1s ease-in;
      }
 
      /*Transición del anillo del iris el cual se escala a 1.1
      al hacer hover en ul*/
      ul:hover .ring {
         transition:transform 0.1s ease-in;
         transform:scale(1.1);
      }
 
 
      /* Las 3 aspas del sharingan, mejor dicho una parte de ellas:
      .aspas son los 3 elementos li que con los siguientes estilos formaran un 
      circulo de 25px, posicionados de forma relativa pero los valores en
      top y left son sólo del aspa superior (al igual que .aspa p) y 
      con su respectiva transición para la propiedad background. */
      .aspa {
          top: -61%;
          left: 68px;
          height: 25px;
          width: 25px;
          border-radius: 50px 50px 50px 50px;
          transition:background .5s ease-out;
      }
 
      /*Punta de las 3 aspas (elementos p dentro de los li.aspa),
      que se logran gracias a las propiedades border-radius y 
      transform: skew() dándole una forma parecida a las puntas
      de la primera imagen y posicionadas de forma correcta 
      por encima de su elemento padre y con una transición 
      para la propiedad background*/
      .aspa p {
             position: relative;
             top: -43px;
             left: 4px;
             border-radius: 197px 0px 371px 273px;
                  transform: skew(-46deg, -10deg);
                  transition:background .5s ease-out;
      }
 
 
      /*Al hacer hover en ul pues se le aplica un fondo
      negro tanto a las aspas (li.aspa) como 
      a las puntas de las aspas (li.aspa p) para hacerlas
      "visibles"*/
      ul:hover .aspa, ul:hover .aspa p {
         background-color:#000;
      }
 
 
      /*.der e .izq son las clases para las aspas derecha 
      e izquierda, que ya con posicionadas de forma relativa 
      se rotan cada una en el angulo deseado con transform rotate() 
      para que sea lo mas parecido a un sharingan */
      .der {
          left: 120px;
          top: -62px;
          transform: rotate(69deg);
      }
 
      .izq {
          left: 15px;
          top: -87px;
          transform: rotate(200deg);
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

/*Hasta este punto ya se tiene un sharingan nivel 1 completo,
   pero le falta su movimiento circular, éste se logra definiendo
   3 keyframes que apliquen 'transform: translate(px,px) rotate(deg)'
   a cada una de las aspas (.sup,.der,.izq) en 7 pasos   siguiendo 
   la trayectoria de .ring */
   @keyframes aspa1 {
      0% {
        transform: translate(0px,0px) rotate(0deg);
      }
 
      50% {
        transform:translate(59px,28px) rotate(28deg);
      }
 
      60% {
        transform:translate(51px,100px) rotate(68deg);
      }
 
      70% {
        transform:translate(4px,129px) rotate(146deg);
      }
 
      80% {
        transform:translate(-54px,98px) rotate(197deg);
      }
 
      90% {
        transform:translate(-67px,53px) rotate(255deg);
      }
 
      100% {
        transform: translate(3px,-1px) rotate(349deg);
      }
    } 
 
    @keyframes aspa2 {
      0% {
        transform: translate(0px,0px) rotate(75deg);
      }
 
      50% {
        transform:translate(-36px,17px) rotate(92deg);
      }
 
      60% {
        transform:translate(-106px,2px) rotate(205deg);
      }
 
      70% {
        transform:translate(-112px,-60px) rotate(248deg);
      }
 
      80% {
        transform:translate(-49px,-103px) rotate(354deg);
      }
 
      90% {
        transform:translate(11px,-54px) rotate(387deg);
      }
 
      100% {
        transform: translate(5px,0px) rotate(441deg);
      }
    } 
 
    @keyframes aspa3 {
      0% {
        transform: translate(0,0) rotate(200deg);
      }
 
      50% {
        transform:translate(-8px,-34px) rotate(219deg);
      }
 
      60% {
        transform:translate(55px,-98px) rotate(350deg);
      }
      70% {
        transform:translate(116px,-43px) rotate(410deg);
      }
 
      80% {
        transform:translate(106px,3px) rotate(442deg);
      }
      90% {
        transform:translate(55px,27px) rotate(503deg);
      }
 
      100% {
        transform: translate(2px,1px) rotate(551deg);
 
      }
    } 
 
 
   /*Aplicando una animación con dirección normal, con un
   retraso de 1s, una duración de 0.5s, realizando 2 vueltas
   o ciclos y de forma lineal */
   ul:hover .sup {
      animation-name: aspa1;
      animation-duration: .5s;
      animation-iteration-count: 2;
      animation-timing-function: linear;
      animation-delay:1s;
      animation-direction: normal;
   }
 
   ul:hover .der {
      animation-name: aspa2;
      animation-duration: .5s;
      animation-iteration-count: 2;
      animation-timing-function: linear;
      animation-delay:1s;
      animation-direction: normal;
   }
 
 
   ul:hover .izq {
      animation-name: aspa3;
      animation-duration: .5s;
      animation-iteration-count: 2;
      animation-timing-function: linear;
      animation-delay:1s;
      animation-direction: normal;
   }

Ejemplo del efecto

css, Tutoriales CSSEtiquetas: , , , , , ,

Te recomendamos leer:


Sin título-1
Efecto fotos tiradas Css3

Nube de etiquetas con Css3
jsfiddle-logo1-300x300
jsFiddle editor online html ,css y JavaScript
rinne-1339683953_full550
Rinnegan animado con Css3








otros llegaron buscando

sharingan

Deja un comentario