Animando cosas con CSS: Creando una luna

• Categorías
• /
• CSS
• /
• Animando cosas con CSS: Creando una luna

En entregas anteriores vimos cómo crear algunas sencillas animaciones con un poco de CSS que inclusive podrían usarse como loaders: ANIMANDO COSAS CON CSS y un par de exóticos loaders con CSS: ANIMANDO COSAS CON CSS: CREANDO LOADERS.

Emplearemos un conjunto de div como cráteres deseemos, enlazada a dos simples animaciones: una como hover que intenta emular las fases de la Luna y otra para mostrar su característico brillo.

Además, usaremos un sencillo JavaScript para dibujar cuantas estrellas queramos posicionadas en posiciones aleatorias; el resultado es el siguiente:

Construyendo nuestra Luna en tres pasos

1. La base y el halo de la Luna

Construiremos la estructura básica de la Luna la cual es simplemente una circunferencia con un halo el cual varía su brillo mediante una animación empleando la ya conocida propiedad box-shadow:

    #moon{
        position:absolute;
        top:15%;
        right:50%;
        right:calc(50% - 100px);
        width:200px;
        height:200px;
        border-radius:50%;
        background:#CCC;
        box-shadow:0px 0px 100px #FFFF8C;
        z-index:5;
        animation: moonAnimation 3s infinite;
    }

    @keyframes "moonAnimation" { 0% { box-shadow: 0px 0px 100px #FFF; } 50% { box-shadow: 0px 0px 140px #FFF; } 100% { box-shadow: 0px 0px 100px #FFF; } }

Quedando hasta ahora la Luna de la siguiente manera:

2. Los cráteres y las fases de la Luna

También mencionamos que colocaremos una capa de solapamiento (hover) la cual será animada y mostrará las fases de la Luna aunque varias de estas fases no sean exactas (es un sencillo experimento, no esperes un comportamiento exacto -.-); además esta capa -div- es la que contendrá los cráteres los cuales tienen formas variadas; podemos agregar tantos cráteres como deseemos en donde un cráter representa un div; para nuestro ejemplo nos basta como siete cráteres:

  #moonFase{
        position:absolute;
        top:15%;
        right:50%;
        right:calc(50% - 100px);
        width:200px;
        height:200px;
        border-radius:50%;
        background: rgba(153,153,153,0);
        box-shadow: inset -25px 0px 0 0px #999;
        z-index:6;
        animation: moonFaseAnimation 600s infinite;
    }

    .crater{
        position:absolute;
        background:#555;
        box-shadow: inset 3px -2px 0 0px #414043;
        z-index:7;
    }

    .crater1{
        top:30px;
        left:40px;
        width:25px;
        height:45px;
        border-top-right-radius:50px 100px;
        border-top-left-radius:50px 100px;
        border-bottom-right-radius:50px 100px;
        border-bottom-left-radius:50px 100px;
        transform:rotate(40deg);
    }

Para no extender de más esta entrada solo se muestra el CSS de un cráter; vea el ejemplo completo en los enlaces de descarga al inicio y final de esta entrada.

Para dar un toque extra a los cráteres también emplearemos nuevamente la propiedad box-shadow pero esta vez para que actúe como borde interno empleando el valor inset recordando una entrada anterior en donde creamos unos fantásticos BOTONES CON FONDO CORREDIZO EN CSS los cuales puedes ver en el enlace anterior.

Quedando nuestra luna ya completada de la siguiente manera:

3. Las estrellas con JavaScript

Como mencionamos en un inicio, para dar un aspecto un poco más interesante a nuestra Luna, le colocaremos una serie de estrellas posicionadas de manera aleatoria; como da demasiado trabajo colocar más de cien estrellas de manera manual, lo haremos programáticamente con ayuda de un sencillo JavaScript que prácticamente se explica solo:

  // determino el tamano de la pantalla	
            var w = window.innerWidth;
            var h = window.innerHeight;

            // pinto 250 estrellas random
            for (i = 0; i < 250; i++) {
                wRan = Math.floor(Math.random() * w);
                hRan = Math.floor(Math.random() * h);
                var star = document.createElement("div");
                star.setAttribute("class", "star");
                star.style.bottom = hRan + "px";
                star.style.right = wRan + "px";
                document.body.appendChild(star);
            } 

Por si tienes duda de cómo definimos la clase .star:

    .star {
        width: 2px;
        height: 2px;
        border-radius: 2px;
        background: rgba(255,255,255,1);
        box-shadow: 0px 0px 1px 1px rgba(255,255,255,0.6);
        position: absolute;
    }  

También es posible variar el brillo de las estrellas con una animación pero para mantener este experimento lo más sencillo posible lo dejaremos así.

Finalmente, puedes ver tranquilamente el experimento en un enlace aparte y hacer los cambios que quieras con él; para guardarlo simplemente aplica clic clic derecho y "Guardar como" o el atajo de teclado "Ctrl + s":