{"id":2329,"date":"2017-03-26T22:05:15","date_gmt":"2017-03-26T22:05:15","guid":{"rendered":"http:\/\/cssreset.com\/?p=2329"},"modified":"2017-03-26T22:05:15","modified_gmt":"2017-03-26T22:05:15","slug":"top-9-css-snippets-of-cats","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/top-9-css-snippets-of-cats\/","title":{"rendered":"Top 9 CSS Snippets of Cats"},"content":{"rendered":"

If you spend any time on the internet, then you probably know that the internet is obsessed with cats. Cat videos, cat images, cat memes…they’re everywhere. If you want to contribute your part to the world wide web’s cat obsession, check out these 10 CSS snippets that show you how to add all sorts of cats to your projects and websites.<\/p>\n

1. Pure CSS Animated Cat<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

This pure CSS snippet creates a cat with animated eyes that move up, down, and left, and eyelids that blink.<\/p>\n

2. SVG Cat<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

If you like to create SVG animations, then this snippet is for you. This cat is created using SVG HTML tags and CSS. It’s animation functionality includes a wagging tail.<\/p>\n

3. Cat in a Cup<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

Is there anything cuter than a cat in a tea cup? Probably not, although for this phenomenon to occur in real life, you’d either need a really tiny cat or a really large tea cup.<\/p>\n

4. Cat Moon<\/a><\/p>\n

\"Screen<\/p>\n

This CSS snippet creates an effect where a cat smoothly appears from behind the moon when you hover over the moon with your cursor. This effect occurs thanks to some really nice CSS transitions. The clouds in the snippet are also animated to move back and forth across the moon.<\/p>\n

5. Walking Cat<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

This very detailed CSS animation features a cat walking in front of a city block and dusk.<\/p>\n

6. Cat in Space<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

This snippet uses CSS, HTML, and JavaScript to create the illusion of a cat flying through space because…why not?<\/p>\n

7. Cat’s Clock<\/a><\/p>\n

\"Screen<\/a><\/p>\n

This snippet is a two-for-one, not only do you get a cat, but you also get a real, working clock animation that will give you the actual time it is in your geographic location.<\/p>\n

8. Pure CSS Cat<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

This pure CSS cat snippt doesn’t contain any animations, but it’s cute enough to make any cat lover smile.<\/p>\n

9. Cat Loader<\/a>\"Screen<\/a><\/p>\n

 <\/p>\n

Here’s a cat snippet that’s actually sort of useful — this snippet shows you how to make an animated loading spinner that features a cat whose eyes follow the loader (that happens to look a little bit like a mouse!)<\/p>\n

Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

If you spend any time on the internet, then you probably know that the internet is obsessed with cats. Cat videos, cat images, cat memes…they’re everywhere. If you want to contribute your part to the world wide web’s cat obsession, […]<\/p>\n

Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2342,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2329"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2329"}],"version-history":[{"count":2,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2329\/revisions"}],"predecessor-version":[{"id":2344,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2329\/revisions\/2344"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2342"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2329"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2329"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2329"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}