css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

No-js :) Just for fun and practice


  1. Even the background-position is animated, nice touch!

  2. Super cool! Love it!

  3. Thank you :)

  4. It's finished now :)

  5. Definitely one of the best pens I've seen, and definitely one of my favorites!

  6. This is the most impressive use of "CSS only" I've seen yet. Superb job.

  7. Thank you all :)

  8. We're not worthy!

  9. Killer. I never knew you could do such things with css alone

  10. killer indeed. although user-select would be a nice touch. at the moment it is possible to select apple logo.. :)

  11. Thank you all :) @xevelito what do you mean saying "user-select"?

  12. In my Chrome 26 (OSX) the pad's at the bottom are flickering during the animation. Adding transform: translateZ(1px); to 'body .pad' fixes that.

  13. How long did this take you?

  14. Thank you all, @anthınyadamski about 2 hours.

  15. WOW ! Impressive result !

  16. Congratulations sir, you're totally overpowered! Awesome work!

  17. You've got to be kidding me!

  18. Ok, this is sick :D Great work!

  19. Thank you :)

  20. Wow! This is amazing.

  21. Wow, this is incredible. Mind blowing!

  22. @noeberg Beautiful! One of my favorite pens yet!

  23. Super))! mac in my heart

  24. спизженно лол

  25. I like it. Good work!

  26. well handled CSS animations.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.