El reactor Arc de Iron Man usa transformaciones y animaciones CSS3

Muy bien, fanáticos de Iron Man, ¡enciendan sus editores de código! Vamos a hacer el reactor Arc a partir del traje de Iron Man en CSS. Así es como se verá el resultado final:

El voltorio de página completa

Haremos nuestro reactor Arc sobre un fondo oscuro de página completa. Aquí está nuestro código para crear un elemento contenedor de página completa:

body {  margin: 0;}.fullpage-wrapper {  height: 100vh;  background: radial-gradient(#353c44, #222931);}

¿Por qué no declaramos margen en el cuerpo? El bodyelemento tiene un margen establecido de forma predeterminada en la hoja de estilo del agente de usuario. Esto evita que los elementos del interior bodytoquen los bordes de la pantalla. Como queremos que nuestro contenedor cubra toda la pantalla, de borde a borde, eliminamos ese margen predeterminado en bodyel elemento configurándolo en 0.

Le hemos dado .fullpage-wrapperla altura completa de la ventana gráfica. No tenemos que especificar un ancho porque un div tiene el ancho completo de forma predeterminada. Podríamos haber optado por otro enfoque estableciendo tanto el ancho como el alto del elemento, 100%pero eso conlleva algunos posibles inconvenientes a medida que se agregan más elementos a la pantalla. El uso de unidades de ventana gráfica garantiza que nuestro contenedor siempre ocupará todo el espacio vertical de la pantalla, independientemente de qué sea o qué otros elementos se agreguen al diseño.

También usamos un degradado radial en nuestro contenedor usando radial-gradient()la función CSS. Los parámetros dentro de la función son los puntos de inicio y finalización del color. Entonces, el centro del fondo estará cada vez más #353c44hacia #222931los bordes. Es útil, pero un buen toque.

Centrar el contenedor del reactor

Antes de comenzar a crear nuestro reactor, creemos un contenedor para él y lo centraremos:

.reactor-container {  width: 300px;  height: 300px;  margin: auto;  border: 1px dashed #888;}

Esto nos da un cuadro 300pxx 300pxcon borde discontinuo. La margin: auto;declaración garantiza un espacio horizontal igual.

¿Pero por qué no lo centra verticalmente?

Según las especificaciones de CSS2, si asignamos un margen automático a los lados izquierdo y derecho, todo el espacio disponible se dividirá equitativamente entre los márgenes izquierdo y derecho. Sin embargo, este no es el mismo caso para el margen superior e inferior. Para los márgenes superior e inferior, la definición CSS2 dice:

Si margin-top, oh margin-bottomhijo auto, su valor es usado 0.

Sin embargo, tenemos una buena noticia. El diseño de Flexbox sigue nuevas reglas de alineación y esto es lo que dice la especificación de Flexbox:

Antes de la alineación mediante justify-content y align-self, cualquier espacio libre positivo se distribuye a los márgenes automáticos en esa dimensión.

Esto significa que si el elemento en consideración se muestra como un elemento flexible, margin: auto;funcionará en ambas direcciones. Hagamos de nuestro contenedor un contenedor flexible y sus elementos secundarios sean elementos flexibles:

.fullpage-wrapper {  width: 100%;  height: 100vh;  background: radial-gradient(#353c44, #222931);  display: flex;}

Ahí está mucho mejor:

Existen muchos otros métodos para centrar elementos en HTML. Hay una guía detallada sobre cómo centrarse aquí en para obtener más información.

El núcleo del reactor: círculos concéntricos en CSS

Sabemos que los nuevos elementos en HTML se crean de izquierda a derecha (para idiomas de izquierda a derecha) o de arriba a abajo. Los elementos nunca se superponen, hasta que proporciones un margen negativo.

eyframesat-rule:

@keyframes reactor-anim {  from {    transform: rotate(0deg);  }  to {    transform: rotate(360deg);  }}

Queremos que el elemento esté en 0 grados y animarlo hasta que alcance los 360 grados. Y llamamos a esta animación "reactor-anim".

El elemento que queremos animar es .coil-contailer. Tenga en cuenta que aún no definimos qué objeto animar, solo hemos definido el estado inicial y final y el nombre de la animación.

Necesitamos vincular el elemento a la animación para que tenga efecto. Lo hacemos mediante animation-namela propiedad on .coil-container:

.coil-container {  position: relative;  width: 100%;  height: 100%;  animation-name: reactor-anim;  animation-duration: 3s;}

Tenga en cuenta que también proporcionamos la duración de la animación mediante animation-durationla propiedad. Esto define cuánto tiempo debe tardar en pasar del estado "desde" al estado "hasta" definido mediante la @keyframesregla at.

Necesitamos cambiar dos cosas aquí: queremos que la animación continúe infinitamente y queremos una animación lineal. Puedes ver que la animación es lenta al principio, luego rápida y nuevamente lenta al final; este comportamiento está definido por la función de tiempo de una animación.

Hagamos estos cambios:

.coil-container {  position: relative;  width: 100%;  height: 100%;  animation-name: reactor-anim;  animation-duration: 3s;  animation-iteration-count: infinite;  animation-timing-function: linear;}

Usamos animation-iteration-countla propiedad para configurar la animación infinitey animation-timing-functionpara hacer la animación linear, el valor predeterminado animation-timing-functiones ease.

Podemos combinar todas estas propiedades de animación...

animation-name: reactor-anim;animation-duration: 3s;animation-iteration-count: infinite;animation-timing-function: linear;

…en una propiedad abreviada como esta:

animation: 3s infinite linear reactor-anim;

Toques finales al contenedor del reactor

Nuestro reactor está listo, ahora vamos a hacer algunos cambios finales en el .reactor-container. Primero, necesitaremos un círculo oscuro detrás del reactor:

div  div    !-- dark circle behind the reactor --    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

Vamos a darle un fondo oscuro y añadirle algo de brillo:

.reactor-container-inner {  height: 238px;  width: 238px;  background-color: rgb(22, 26, 27);;  box-shadow: 0px 0px 4px 1px #52fefe;}

¿Ves cómo el fondo oscuro y el brillo crean un efecto de relieve?

A continuación, haremos el .rotator-containercírculo y le daremos un poco de sombra y borde, y ya estaremos listos:

.reactor-container {  width: 300px;  height: 300px;  margin: auto;  border: 1px dashed #888;  position: relative;  border-radius: 50%;  background-color: #384c50;  border: 1px solid rgb(18, 20, 20);  box-shadow: 0px 0px 32px 8px rgb(18, 20, 20), 0px 0px 4px 1px rgb(18, 20, 20) inset;}

¡Saludos! Nuestro Arc Reactor está listo e incluso tiene una pequeña animación como beneficio adicional. Para mejorar esto, podríamos explorar el uso de propiedades personalizadas para crear variables reutilizables para nuestros valores de color y número para un mantenimiento más sencillo. De manera similar, podríamos considerar el uso de un preprocesador, como Sass, Less o PostCSS, para escribir funciones que hagan el trabajo matemático por nosotros. ¡Me encantaría ver ejemplos como ese en los comentarios!