CSS-only Chrome Dino Game
What is the best way to showcase the modern CSS features? It's by making CSS-only games.
This time, it's the Chrome Dino game that you can play using your keyboard. Yes, you can jump and crouch with the arrow keys!
100% CSS magic powered by Scroll-Driven animations, @property, container queries, etc.
A Chrome-only demo. Sorry, but the dino didn't want to "run" in other browsers, and I respect its decision.
See the Pen CSS-only Chrome Dino Game (with keyboard!) by Temani Afif (@t_afif) on CodePen.
In case you missed it, I also created a mini CSS Mario World using the same techniques.
See the Pen CSS-only Mario World (with keyboard!) by Temani Afif (@t_afif) on CodePen.
More CSS Tips
- Add a Wobbling Animation to your Images Create an infinite fancy animation using clip-path and shape().
- A Squishy Button with a Hover/Click Effect Using the shape() function to add a fancy shape to a button element.