Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Dismiss
  1. Web Design
  2. CSS

6 Handy CSS3 Animation Projects

by
Lessons:7Length:1.1 hours
CSSAnimation
For full access to all 7 lessons, including source files, subscribe with Elements.
  • Overview
  • Transcript

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

Adi Purdila
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.
Unlimited Downloads
From $16.50/month
Get access to over one million creative assets on Envato Elements.
Over 9 Million Digital Assets
Everything you need for your next creative project.
Create Beautiful Logos, Designs
& Mockups in Seconds
Design like a professional without Photoshop.
Join the Community
Share ideas. Host meetups. Lead discussions. Collaborate.
Quick LinksExplore popular categories