@Furoya ¿querías espirales en css?

kseso? · #1 (**permalink**) 28/06/2012, 09:02

Y perdón por citarte en el título.
Pero me acordé que en alguna ocasión lo habías mencionado, y ahora al utilizar el buscador veo que tienes un tema al respecto.
Así que por una vez voy a cumplir tus deseos, si me dejas =P xD
Espirales

Las explicaciones, para quien necesite comprender el código, en el artículo.

~~.................................~~
Se me olvidaba: el tema de Furoya
~~.................................~~

furoya · #2 (**permalink**) 28/06/2012, 17:39

Masterpiece.

La primera vez que veo un loop CSS.

Brillante, como siempre. Gracias.

⌚

Bueno. Al fin me recupero un poco y puedo volver a escribir.

Aunque no estoy lúcido del todo, quise ver si aceptaba animaciones. Y fue fácil. Ésta no es definitiva, es solamente para probar que se puede.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<style type="text/css">
.espiral div, .espiral { 
position: absolute; 
right: -1em; 
top: -1px; 
width: 1em; 
height: 1em; 
font-size: 0.85em; 
border-top: 1px solid #666690; 
border-left: 1px solid #666690; 
border-radius: 100% 0 0 0; 
-moz-transform: rotate(90deg); 
-o-transform: rotate(90deg); 
-webkit-transform: rotate(90deg); 
-ms-transform: rotate(90deg); 
transform: rotate(90deg); 
} 

.espiral { 
font-size: 200px; 
position: relative; 
top: 1em; 
cursor: pointer;
-webkit-transition: all 3s linear;
-moz-transition: all 3s linear;
-o-transition: all 3s linear;
-ms-transition: all 3s linear; 
transition: all 3s linear;
}

.espiral:hover {
font-size:50px;
-moz-transform: rotate(360deg); 
-o-transform: rotate(360deg); 
-webkit-transform: rotate(360deg); 
-ms-transform: rotate(360deg); 
transform: rotate(360deg); 
}

</style>
</head>
<body>
<div class="espiral"> 
<div><div><div><div>
<div><div><div><div>
<div><div><div><div>
<div><div><div><div>
<div><div><div><div> 
</div></div></div></div>
</div></div></div></div>
</div></div></div></div>
</div></div></div></div>
</div></div></div></div> 
</div>
</body>
</html>

Hay que poner un enlace hasta aquí en el otro tema. Lamento que se hayan pasado los seis meses, pero no estoy seguro de que desde los buscadores alguien abra un sitio que en su título dice "furoya" (especialmente en Japón), así que va a ser más fácil que lo vean desde el que puse originalmente.

Aunque, por mí, no hay problema en que me nombres. Me estás haciendo famoso.

kseso? · #3 (**permalink**) 28/06/2012, 19:17

Gracias.

Me pillaste puliendo mis planes de dominar al mundo mediante la hipnosis.
Ahora el que entre a ver la espirar será mi esclavo y hará mi voluntad MUAH MUAH MUAH!!

Bien pensado, pero mejor que las transform, las @keyframes.

kseso? · #4 (**permalink**) 29/06/2012, 06:37

Pensándolo mejor, cambio el minoyo por el
~~..........~~
HIPNOSAPO
~~..........~~

Creo Furoya que en algún momento ya lo habíamos utilizado xD

Heiroon · #5 (**permalink**) 29/06/2012, 14:50

Excelente aporte sr. Kseso! mis respetos...

kseso? · #6 (**permalink**) 29/06/2012, 15:34

Gracias Heiroon

Ahora sólo hace falta que alguien le encuentre un uso.

furoya · #7 (**permalink**) 29/06/2012, 17:18

... CUA ... encuentre ... CUA ... uso ... CUA ...

(@@)
º