DEV Community

Cover image for "Trapped Alien" CSS Art & Animation
Ali Shata
Ali Shata

Posted on

2 1 2

"Trapped Alien" CSS Art & Animation

This is a submission for Frontend Challenge v24.09.04, CSS Art: Space.

Inspiration

I'm showing a 2D Alien Trapped in a Space hole, with Space Texture behind him to create some depth and parallax also it's interactive to mouse hover, all is my Original Work and made using CSS Only, Inspired by Cartoons especially the simple shape cartoon characters along with Alien & UFO Culture.

Demo

Journey

CSS Art isn't something new to me, I made some css art back then when I was starting learning about CSS, However this challenge allowed me to refresh my knowledge and deepen it with the unpredictable possibilities of CSS, the one thing that was completely new to me was: Updating a custom CSS property in an animation and using it to transition and element from a state to another.

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (2)

Collapse
 
nataliafdev profile image
Natália F. Dev

What an amazing animation!

Collapse
 
alishata128 profile image
Ali Shata

Thanks Natalia 🙏

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay