Treehouse Code Adventures > Animaciones SVG

Animaciones SVG

Usa SVGs para embellecer y agregar un poco de carácter a un sitio web. Se requieren algunos HTML y CSS básicos. Necesitarás usar los archivos SVG proporcionados para que coincida con el mockup lo más fielmente posible.

Comienza la Aventura

Creado: 11/06/2023 por Brian Jensen

Nivel de habilidad: principiante

Temas utilizados:

Tiempo estimado de finalización: 6 horas

Conceptos Básicos de HTML

Aprende HTML (Lenguaje de Marcas de Hipertexto), el idioma común de todos los sitios web. HTML describe la estructura básica y el contenido de una página web.

Conceptos Básicos de CSS

Aprende los conceptos básicos de CSS, una de las tecnologías principales para diseñar y construir sitios web y aplicaciones.

Conceptos Básicos de SVG

Scalable Vector Graphics (SVG) es un lenguaje de marcado XML para crear imágenes bidimensionales usando vectores.

Transiciones y Transformaciones CSS

Con transiciones y transformaciones de CSS, puedes crear animaciones simples que mejoren las interacciones del usuario en sitios web y aplicaciones.

Animación de SVG con CSS

Este curso breve cubre los métodos más comunes para animar SVG: transiciones CSS, transformaciones y animaciones de fotogramas clave.

Flujo de trabajo y herramientas SVG

Aprende herramientas y técnicas útiles para optimizar, organizar y estructurar tus archivos SVG. Luego aprende a cambiar el tamaño y escala de tu SVG con atributos en línea.

0
Para comenzar, haz clic en Comienza la Aventura en la parte superior de la página y luego descarga tus archivos de inicio.
1
Usa el background.svg archivo para crear un fondo en mosaico en el cuerpo del sitio, como se muestra en el prototipo.
2
Crea un menú de navegación que coincida con los prototipos usando los SVG proporcionados.
3
Cuando un usuario pasa el cursor sobre un elemento del menú de navegación, usa CSS para cambiar el color del texto Y del SVG en línea.
4
Inserta el logo.svg para que coincida con el prototipo usando el método SVG en línea.
5
Usa el corgi.svg para crear un <symbol> elemento para corgis en el archivo index.html.
6
Usa el <use> elemento para recrear cuatro copias del svg de corgi en el diseño de index.html que coincida con el prototipo.
7
Usa el currentColor valor CSS para hacer que el cuerpo de cada corgi sea único, coincidiendo con el prototipo.
8
Agrega un efecto de transición CSS o animación al estado de desplazamiento del logo o carga de página.
9
Agrega un efecto de transición CSS o animación al estado de desplazamiento del corgi o carga de página.
10
Agrega un efecto de transición CSS o animación al estado de desplazamiento del menú de navegación.