Floating Ghost Animation using HTML & CSS

Hey guys 😎 In this tutorial, we're gonna design a cool Floating Ghost using only HTML & CSS. I also considered a hover effect for that which can turn it into a smily ghost and again a scary ghost. Hope you enjoy it, don't forget to hit the like button 😊

📂 Assets
Nothing's used...

🔗 Source code

🔔 Subscribe Now!

⏱ Timestamps
00:00 What are we gonna do?!
00:44 Ghost Body Elements
00:50 General Styles
01:08 Ghost Styles
01:35 Ghost Face Elements
01:49 Ghost Face Styles
04:15 Ghost Hands Elements
04:24 Ghost Hands Styles
05:32 Ghost Feet Elements
05:43 Ghost Feet Styles
06:40 Ghost Animations
07:57 Final Result

🎵 Music
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: BEAUZ & JVNA - Crazy [NCS Release]
Music provided by NoCopyrightSounds.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Jordan Schor & Harley Bird - Home
Music provided by NoCopyrightSounds.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Lost Sky - Where We Started (feat. Jex)
Music provided by NoCopyrightSounds.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Thanks for watching, I appreciate it 🙏
Made with 💗 by Hossein

[WallaceThiago]

At first I was like "how tf he gonna build that? 🤨🤨🤨" and then i was like

[yorlin]

Amazing!!! I would like to know, why did you use <span> for this and not <div>? Why is this tag (span) special for this? Thank you

[munner]

Would it be possible to use this as a cursor for a website?

[baksonyanik]

do you write classes with a dot so they are nested like in scss?

[samiamou]

Assalamolaium, Are u from Bangladesh Hossein?

[Mirros-m]

you should make a video about svg animation

[shiido.]

Your CSS is amazing but somethimes it's not optimal for mobile. Else you are very good gg