1. Web Design
  2. CSS
Webdesign
6 Handy CSS3 Animation Projects
by
Lessons:7Length:1.1 hours
CSSAnimation
6 css animation projects 400x277
For full access to all 7 lessons, including source files, subscribe with Elements.

2.5 Hamburger Menu Icon to Cross

A common pattern in web design these days is the hamburger menu icon. For this fifth project, we’ll create one of these icons using CSS, and then we’ll animate it by transforming it into a cross. Let’s begin.

Related Links

1.Introduction
1 lesson, 01:07

Free Lesson
1.1
Welcome to the Course
01:07

2.The Projects
6 lessons, 1:05:33

Free Lesson
2.1
Toggle Slider Checkbox
09:26

2.2
SVG Page Loader
09:32

2.3
Card Notification
12:18

2.4
Scrolling Mouse Animation
09:07

2.5
Hamburger Menu Icon to Cross
10:24

2.6
Full-Screen Navigation Overlay
14:46

Iign1n2b
Adi Purdila
Photoshop, HTML, CSS? Yep, that's what I do best. Mix that with lots of head nodding from trance music and you've got me in a nutshell.
Continue watching with Elements
Elements
Unlimited Downloads
From $19/month
Get access to over 400,000 creative assets on Envato Elements.
Market
Over 9 Million Digital Assets
Everything you need for your next creative project.
Studio
Hire a Freelancer
Choose from 2,000 professionals ready to do the work for you.
Community
Join the Community
Share ideas. Host meetups. Lead discussions. Collaborate.
Quick LinksExplore popular categories