Paso 1: Estructura HTML
Inicialmente crearemos la estructura html para la animación, necesitaremos un contenedor y dentro de el dos elementos uno para cada circulo como vemos a continuación:
Paso 2: Creando medias circunferencias
En este paso daremos los estilos necesarios a nuestro contenedor y a cada uno de los círculos, el contenedor para nuestro caso con la clase .spiner tendrá un alto definido de 74px. Ademas de esto debemos agregar un border-radius a los elementos .ball y .ball1, para que tomen forma de circulo.
Las medias circunferencias las haremos dando bordes a nuestros elementos .ball y .ball1, dos bordes no tendrán opacidad, los dos bordes restantes en cada elemento tendrá una opacidad de 0.3, de esta forma estamos logrando círculos de colores, medio opaco y medio traslucido como se puede ver en el siguiente ejemplo.
Ya teniendo esto es necesario agregar las animaciones, como se vio en el código CSS anterior, ya se han añadido los tributos animation con las especificaciones de la animación, los cuales me indican que esta se llama spin y spinoff que dura un segundo (tiempo t 1s) ejecutándose con un tipo de animación linear y se repetirá infinitamente.
Paso 3: Animando elementos
Por el momento solo hemos nombrado nuestra animación, para animar atributos es necesario utilizar la regla CSS @keyframes, la cual nos permite animar el elemento gradualmente en un tiempo (tiempo t especificado anteriormente) desde un estilo a un estilo nuevo.
Si queremos entender mejor el funcionamiento de esta regla podemos visitar los siguientes enlaces:
Si queremos entender mejor el funcionamiento de esta regla podemos visitar los siguientes enlaces:
Para hacer nuestra rotación debemos utilizar @keyframes para animar los atributos transform: rotate(0deg) hasta transform: rotate(360deg), esto hará un movimiento rotatorio de nuestros elementos. Una vez hecho esto ya podremos ver la animación funcionando.
La forma de hacerlo podemos evidenciarla continuación.
La forma de hacerlo podemos evidenciarla continuación.
Si observamos bien, las animaciones de los círculos giran en sentido contrario, esto sucede ya que una animación la iniciamos con rotación 0 hasta 360 y la otra desde 360 a 0, logrando un efecto inverso en ambas circunferencias.
Paso 4: Funcionalidades extra
Como ya tenemos realizada la animación, y para ampliar su utilidad en nuestra web, debemos agregar algunas funcionalidades extra, en este caso agregaremos la posibilitad de pausar la animación. para esto agregaremos la clase .stop la cual sera aplicada a nuestro contenedor .spiner y aplicaremos el estilo animation-play-state: paused; logrando el efecto deseado.
El resultado final de todo este tutorial podemos verlo continuación:
Para finalizar también podemos encontrar este ejemplo en :
Espero esto haya sido de su utilidad y les sirva de ayuda en sus proyectos web, no obstante si tienen dudas y/o sugerencias no olviden comentar.
Hasta la próxima.
No hay comentarios.:
Publicar un comentario