Re-Creating the Porky Pig Animation from Looney Tunes in CSS
source link: https://kilianvalkhof.com/2021/css-html/re-creating-the-porky-pig-animation-from-looney-tunes-in-css/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Kilian Valkhof
Building tools that make developers awesome.
Search termRe-Creating the Porky Pig Animation from Looney Tunes in CSS
Last December I wrote an article in Dutch for the Fronteers blog on a fun bit of CSS I wrote that use 3D transforms to create a cool looking effect: Porky Pig coming out of those red rings announcing the end of a Looney Tunes cartoon. At the time, I was creating a resource of 3D transforms examples so it was on my mind, and I decided to see if I could replicate that ‘coming out of the circles’ effect. Turns out I could!
After writing the Dutch article I reached out to CSS-Tricks to see if they would be interested in the English version of the article and they were! (It helped that it’s literally a CSS trick!).
So I rewrote the article in English and added a few sections (for example on Reduced motion and how we don’t actually need to remove all the animation, just reduce it.) and it’s now published.
You can read the full article over on CSS-Tricks here: Re-Creating the Porky Pig Animation from Looney Tunes in CSS, and see the end result below:
Hi, I'm Kilian. I make Polypane, the browser for responsive web development and design. If you're reading this site, that's probably interesting to you. Try it out!
Related articles
Sloped edges with consistent angle in CSS
CSS & HTML Design , 4 January 2017If you look above this text, you can see that the header of this blog has a sloped edge. It’s one of my favorite things about this new design. The technique I used has a consistent angle regardless of screen size, can show background images and only needs one HTML element and no pseudo elements.…
Responsive design in 2020: Recording of my Halfstack Conference talk
CSS & HTML , 22 June 2020At Halfstack Conf in May I gave a presentation on what I think responsive design should be about in 2020 and what it will be about going forward: responding not just to static device properties like width and height but also to user preferences like preferring dark mode or reduced motion. The recording of it…
Beautiful CSS 3D Transform Examples
CSS & HTML , 5 October 2020CSS 3D transforms create depth and visually interesting elements on your page using perspective. I use them on the Polypane website and whenever I see them in the wild they look fun and clever. Unfortunately I don’t see them being used a whole lot. Maybe that’s because it’s not well known you can do proper 3D…
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK