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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (2)

Collapse
 
nataliafdev profile image
Natália F. Dev •

What an amazing animation!

Collapse
 
alishata128 profile image
Ali Shata •

Thanks Natalia 🙏

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up