¿Cómo hacer un átomo como la animación con animaciones CSS3?

He estado probando esto desde hace 3 o 4 días pero no consigo saber cómo puedo hacer esta animación, ni siquiera estoy seguro de si es posible hacer una como esta usando solo CSS3.¿Cómo hacer un átomo como la animación con animaciones CSS3?

Atom

He intentado utilizar animation-direction:alternate; pero no soy capaz de conseguir este flujo en un ángulo particular, capaz de animar en una forma cuadrada .. pero no de la manera átomo de anime, alguna idea de cómo este se puede lograr usando pure CSS3? si no hay alguna solución en jQuery?

Fuente

2012-10-06 Mr. Alien

Esto debería cerrarse por los mismos motivos por los que OP llegó a cerrar cosas como http://stackoverflow.com/questions/16500907/collapsible-panel-in-html-css (personalmente creo que ambas son válidas, pero el OP claramente tiene un doble estándar) – gcb

@gcb No me importa cerrarlo, si compara las fechas, hice esta pregunta cuando era nuevo en el sitio web y no estaba al tanto de las reglas :) –

@gcb Si ve [este] (http://stackoverflow.com/q/13132864/1542290), encontrarás el mío mucho mejor :) –

Encontrado this en línea.

Utiliza la propiedad transform-style: preserve-3d y gira los electrones en los ejes x, y y z para lograr este efecto 3D.

Estructura HTML

<div id="main"> 
    <div id="atom"> 
     <div class="orbit"> 
      <div class="path"> 
       <div class="electron"></div> 
      </div> 
     </div> 
     <div class="orbit"> 
      <div class="path"> 
       <div class="electron"></div> 
      </div> 
     </div> 
     <div class="orbit"> 
      <div class="path"> 
       <div class="electron"></div> 
      </div> 
     </div> 
     <div class="orbit"> 
      <div class="path"> 
       <div class="electron"></div> 
      </div> 
     </div> 
     <div id="nucleus"></div> 
    </div> 
</div>

CSS

.orbit { 
    -webkit-transform-style: preserve-3d; 
    -webkit-transform: rotateX(80deg) rotateY(20deg); 
} 

#atom .orbit:nth-child(2) { 
    -webkit-transform: rotateX(80deg) rotateY(70deg) 
} 
#atom .orbit:nth-child(3) { 
    -webkit-transform: rotateX(80deg) rotateY(-20deg) 
} 
#atom .orbit:nth-child(4) { 
    -webkit-transform: rotateX(80deg) rotateY(-50deg) 
} 

.path { 
    -webkit-transform-style: preserve-3d; 
    -webkit-animation-name: pathRotate; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
} 

.electron { 
    -webkit-animation-name: electronFix; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
} 

@-webkit-keyframes pathRotate { 
    from { 
     -webkit-transform: rotateZ(0deg); 
    } to { 
     -webkit-transform: rotateZ(360deg); 
    } 
} 

@-webkit-keyframes electronFix { 
    from { 
     -webkit-transform: rotateX(90deg) rotateY(0deg); 
    } to { 
     -webkit-transform: rotateX(90deg) rotateY(-360deg); 
    } 
}

Fiddle

Blog Post

Fuente

2012-10-06 06:43:46 prashanth

es realmente increíble, pero no entiendo una cosa, si puedo usar directamente la imagen del átomo gif, ¿Por qué iría a CSS, donde tengo que escribir tanto código? :( –

@RahulR. Es simplemente divertido saber qué CSS puede hacer, obviamente se puede usar GIF, que es incluso, mejor, sin problemas con el navegador cruzado. nada mas que lo que yo quería una solución css;) –

Definitivamente es posible con CSS. Puse un extremadamente básico juntos como una prueba de concepto antes de notar la publicación de @ prashanth. El que encontró es waaay más fresco, pero aquí está el mío de todos modos ... súper desnudo pero un poco complicado y se vería bastante bien.

http://jsfiddle.net/BZFJ8/2/

Fuente

2012-10-06 07:09:07

acepta que la suya es tranquilamente inteligente, pero no tengo Idea para hacer flotar esa pelota de atrás hacia adelante, pero un buen ejemplo +1 –

Manipular el valor Z en la propiedad translate3d en la animación del fotograma clave le permite cambiar la posición relativa de los electrones de adelante hacia atrás, y agregar un valor de escala() a los fotogramas clave le permite cambiar su tamaño, ya que parecen moverse de adelante hacia atrás. –

Creo que éste también se parece a lo que pidieron, pero me dijeron que es para Safari única animación como de Chrome 9

http://bgre.at/demo/CSS3-atom/index.html

Es posible encontrar una solución con jQuery si te importa el navegador de forma compatible.

Fuente

2012-10-06 12:29:47

¿Cómo hacer un átomo como la animación con animaciones CSS3?

Respuesta

Cuestiones relacionadas