Learn how to add animations and transitions for your menu Icons

Hi Guys!

WELCOME TO THE COURSE  “14 Menu icon animations with CSS”

This course is divided in 5 Sections:

1. Introduction

2. Icons Grid

3. Top Icons

4. Bottom Icons

5. Summary

– You will be learning how to create the following Icons:

Hamburger, Veggie Hamburger, Hotdog, Blinds, Sandwich, Cross, Kebab, Candy box, and chocolate box.

Some of them will transition into an “X” others into arrows, minus symbol and others.

In this course you will be learning the following:

HTML

– Create a container, sections, boxes and the Icons lines adding the class to the tags with two words.

– Add Id’s to the tags.

– Add the center tags.

– Add a title.

CSS

– Add style to the container, section and boxes and lines.

– Create a grid using the properties display, align-items, float and

justify content.

– Add 14 Icon boxes with a background color

– Add a gradient background when hover on the icon boxes.

– Use the property display to create the lines for the Icons.

– Create the animations when hover on the Icons using the properties transform and transition and the values rotate and translate.

– Add the style of an specific line using the property nth-child

– Add a time and transition style using the values cubic-Bezier

and the time in seconds.

-Use keyframes to add an animation to your Icons.

THIS COURSE IS AIM TO BEGINNERS & INTERMEDIATE PROGRAMMERS, WEB DESIGNER, WEB DEVELOPERS.

All the code is made under the html File including the Css Code.

NOT JAVASCRIPT IS USED IN THE COURSE.

A zip file is attached in the section “resources” on the last section of the course.

14 animaciones de iconos de menú con CSS

Learn how to add animations and transitions for your menu Icons”

Este curso es GRATIS

Curso gratis en Udemy

Con los cursos gratis de Udemy puedes aprender muchas cosas sin tener que gastar en ello. Pero primero debes tener en cuenta varias cosas:

Contenido Gratuito

Los cursos gratis de Udemy te permiten aprender nuevas cosas sin tener que pagar. Aprovecha la oportunidad.

Aprendizaje

Pon en práctica todos tus conocimientos aprendidos. Realiza increíbles proyectos basados en el mundo real.

Limites

Debes tener en cuenta que todos los cursos gratuitos de Udemy son de máximo 2 horas y no incluyen un certificado.

Este curso se encuentra disponible de manera gratuita sin necesidad de ningún cupón, a través de la opción “GRATIS”.

Te recomendamos primero leer las diferencias entre un curso gratis y uno de pago para evitar malentendidos:

Deja tus comentarios y sugerencias

Sobre Facialix

Facialix es un sitio web que tiene como objetivo apoyar en el aprendizaje y educación de jóvenes y grandes. Buscando y categorizando recursos educativos gratuitos de internet, de esta manera Facialix ayuda en el constante aprendizaje de todos.