Valores fijos

Lección 10 de 18 del curso Nubes en movimiento - Proyecto de HTML/CSS/JS de Coddy.

¡Muevamos la nube!

Desafío

Fácil

Antes de empezar a mover la nube, vamos a fijar la posición y el tamaño de la nube.

Comenta el código que establece la posición y el tamaño aleatorios de la nube.

En el archivo JS, selecciona el elemento de la nube y:

Establece la propiedad de estilo left a 200px.
Establece la propiedad de estilo top a 200px.
Establece la propiedad de estilo transform a scale(0.5).

Además, establece la propiedad de estilo transition a "all linear 3s" ¡esto nos ayudará a animar la nube más adelante!

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

Todas las lecciones de Nubes en movimiento - Proyecto de HTML/CSS/JS

1Introducción

4Jugando con JS

2Contenedor

5Mover la nube

Valores fijos Lección de proyecto

3La nube

6Muchas nubes

Inyectar HTML usando JS

Inyectar nubes

Iterar sobre todos

Toque final