Something Fun: Pure CSS Animals

Conor

Conor

Elite Member
Joined
Nov 7, 2012
Messages
3,621
Reaction score
6,217
Code: 
www.cssanimals.com

Apparently these are supposed to be used to liven up 404 pages, and such.

You should be able to grab the CSS and HTML code fairly easily, if you want to use them yourself No unnecessary Javascript here.

For example, to use the Cat:

CSS
Code: 
.cat {
    height: 16vmin;
    width: 30vmin;
    position: absolute;
    left: 50%;
    transform: translateY(-70%) translateX(-50%);
    border-radius: 5% 32% 15% 65%;
    top: 50%;
}    

.cat-inner {
    height: 16vmin;
    width: 28vmin;
    background-color: #0E3D58;
    position: absolute;
    transform: translateY(-70%) translateX(-50%) rotate(28deg);
    border-radius: 5% 32% 35% 65%;
    left: 48%;
    bottom: -70%;
    transform-origin: 20% 30%;
    transition: .4s ease-in-out;    
}    


.cat:hover .cat-inner {
    height: 16vmin;
    width: 28vmin;
    background-color: #0E3D58;
    position: absolute;
    transform: translateY(-70%) translateX(-50%) rotate(0deg);
    border-radius: 5% 32% 35% 65%;
    left: 46%;
    bottom: -70%;
    transform-origin: 20% 30%;
    transition: .4s ease-in-out;    
}    




.cat-head {
    position: absolute;
    height: 75%;
    width: 52%;
    background-color: #0E3D58;
    left: -22%;
    top: -55%;
    border-radius: 45% 45% 55% 55%;
}


.cat-ear {
    position: absolute;
    background-color: #0E3D58;
    text-align: left;
    left: 24%;
    top: 3%;
    transform: rotate(30deg) skewX(-30deg) scale(1,.566);
    -webkit-animation: cattwitch 5s ease-in-out 2s infinite;
    animation: cattwitch 5s ease-in-out 2s infinite;
    transition: .4s ease-in-out;
}

.cat-ear:before,
.cat-ear:after {
    content: '';
    position: absolute;
    background-color: inherit;
}

.cat-ear,
.cat-ear:before,
.cat-ear:after {
    width:  8vmin;
    height: 8vmin;
    border-top-right-radius: 30%;
}

.cat-ear:before {
    transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}

.cat-ear:after {
    transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}

.cat-ear2 {
    position: absolute;
    background-color: #0E3D58;
    text-align: left;
    left: 37%;
    top: 19%;
    transform: rotate(108deg) skewX(-30deg) scale(1,.566);    
    transition: .2s ease-in-out;
}

.cat-ear2:before,
.cat-ear2:after {
    content: '';
    position: absolute;
    background-color: inherit;
}

.cat-ear2,
.cat-ear2:before,
.cat-ear2:after {
    width:  8vmin;
    height: 8vmin;
    border-top-right-radius: 30%;
}

.cat-ear2:before {
    transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}

.cat-ear2:after {
    transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}

.cat-nose {
    position: absolute;
    background-color: #E2BAD6;
    width: 15%;
    height: 20%;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    top: 46%;
}

.cat-nose:after {
    content: "";
    position: absolute;
    background-color: #E2BAD6;
    width: 0vmin;
    height: 1vmin;
    border: 1px solid #000;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
}

.cat-mouth {
    background-color: transparent;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    border-left: 2px solid #000;
    height: 1.5vmin;
    width: 3vmin;
    -moz-border-radius: 150px 0px 150px 0px;
    border-radius: 4vmin 4vmin 0px 0px;
    position: absolute;
    bottom: 13%;
    left: 50%;
    transform: translateX(-50%);
    overflow:hidden;
}

.cat-meow {
    background-color: #000;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    border-left: 2px solid #000;
    height: 1.5vmin;
    width: 3vmin;
    -moz-border-radius: 150px 0px 150px 0px;
    border-radius: 4vmin 4vmin 0px 0px;
    position: absolute;
    bottom:120%;
    left: 50%;
    transform: translateX(-50%);
    transition: .4s ease-in-out;
}

.cat:hover .cat-meow {
 -webkit-animation: meow 1s ease-in-out 6s 1;
  animation: meow 1s ease-in-out 6s 1;
}

.cat-leg {
    border-top: 18vmin solid #092738;
    border-left: 3vmin solid transparent;
    height: 0;
    width: 5vmin;
    transform: rotate(-9deg);
    position: absolute;
    top: 45%;
    left: 6%;
    z-index: -1;    
}

.cat-foot {
    height: 2vmin;
    width: 5vmin;
    background-color: #828282;
    position: absolute;
    bottom: -63%;
    left: 10.5%;
    border-radius: 90% 0% 20% 20%;
}

.cat-leg-front {
    border-top: 18vmin solid #0E3D58;
    border-left: 3vmin solid transparent;
    height: 0;
    width: 5vmin;
    transform: rotate(-2deg);
    position: absolute;
    top: 39%;
    left: 18%;
    z-index: -1;
}

.cat-foot-front {
    height: 2vmin;
    width: 5vmin;
    background-color: #BFBFBF;
    position: absolute;
    bottom: -63%;
    left: 19%;
    border-radius: 90% 0% 20% 20%;
}

.cat-hind-leg {
    height: 14vmin;
    width: 10vmin;
    border-radius: 10vmin 0 3vmin 10vmin;
    position: absolute;
    background-color: #0E3D58;
    border-left: 1px solid #092738;
    right: 16%;
    bottom: -62%;
    transition: .4s ease-in-out;
}

.cat-hind-leg2 {
    height: 14vmin;
    width: 10vmin;
    border-radius: 10vmin 0 3vmin 10vmin;
    position: absolute;
    background-color: #092738;
    border-left: 1px solid #092738;
    right: 25%;
    bottom: -62%;
    transition: .4s ease-in-out;
    z-index: -1;
}

.cat-hind-foot {
    height: 2.5vmin;
    width: 5vmin;
    position: absolute;
    background-color: #0E3D58;
    border-radius: 30% 20% 20% 30%;
    right: 20%;
    bottom: -63%;
    transform-origin: 0% 0%;
    transition: .4s ease-in-out;
}

.cat-hind-foot2 {
    height: 2.5vmin;
    width: 5vmin;
    position: absolute;
    background-color: #0E3D58;
    border-radius: 30% 20% 20% 30%;
    right: 22%;
    bottom: -63%;
    transform-origin: 0% 0%;
    transition: .4s ease-in-out;
    z-index:-1;
}

.cat-hind-paw {
    height: 2.5vmin;
    width: 4.7vmin;
    position: absolute;
    background-color: #0E3D58;
    border-radius: 70% 0% 0% 0%;
    right: 32.5%;
    bottom: -63%;
}

.cat-hind-paw2 {
height: 2.5vmin;
    width: 4.7vmin;
    position: absolute;
    background-color: #092738;
    border-radius: 70% 0% 0% 0%;
    right: 39.5%;
    bottom: -63%;
    z-index: -1;
}
 
.cat-hind-leg-top {
    border-top: 9vmin solid #0E3D58;
    border-left: 3vmin solid transparent;
    height: 0;
    width: 5vmin;
    transform: rotate(-20deg);
    position: absolute;
    top: 109%;
    right: 24%;
    z-index: 5;
    transition: .4s ease-in-out;
}

.cat-hind-leg-top2 {
    border-top: 9vmin solid #092738;
    border-left: 3vmin solid transparent;
    height: 0;
    width: 5vmin;
    transform: rotate(-20deg);
    position: absolute;
    top: 109%;
    right: 30%;
    z-index: -1;
    transition: .4s ease-in-out;
}

.cat:hover .cat-hind-leg {
    height: 15vmin;
    width: 10vmin;
    border-radius: 10vmin 4vmin 0 10vmin;
    position: absolute;
    background-color: #0E3D58;
    border-left: 1px solid #092738;
    transform: rotate(24deg);
    right: 6%;
    bottom: -7%;
    transform-origin: 20% 30%;
}    

.cat:hover .cat-hind-leg2 {
    height: 15vmin;
    width: 10vmin;
    border-radius: 10vmin 4vmin 0 10vmin;
    position: absolute;
    background-color: #092738;
    border-left: 1px solid #092738;
    transform: rotate(24deg);
    right: 15%;
    bottom: -7%;
    transform-origin: 20% 30%;    
}

.cat:hover .cat-hind-foot {
    height: 2.7vmin;
    width: 7vmin;
    position: absolute;
    background-color: #0E3D58;
    border-radius: 0% 0% 0% 0%;
    right: 15%;
    bottom: -66%;
    transform: rotate(-38deg);
}    


.cat:hover .cat-hind-foot2 {
    height: 2.7vmin;
    width: 7vmin;
    position: absolute;
    background-color: #092738;
    border-radius: 0% 0% 0% 0%;
    right: 22%;
    bottom: -66%;
    transform: rotate(-38deg);
    z-index:-1;
}

.cat:hover .cat-hind-leg-top {
    border-top: 9vmin solid #0E3D58;
    border-left: 3vmin solid transparent;
    height: 0;
    width: 5vmin;
    transform: rotate(-27deg);
    position: absolute;
    top: 89%;
    right: 19%;
    z-index: 5;
}

.cat:hover .cat-hind-leg-top2 {
    border-top: 9vmin solid #092738;
    border-left: 3vmin solid transparent;
    height: 0;
    width: 5vmin;
    transform: rotate(-27deg);
    position: absolute;
    top: 89%;
    right: 23%;
    z-index: -1;
}

.cat-tail {
    background-color: transparent;
    height: 12vmin;
    width: 15vmin;
    -moz-border-radius: 2vmin 0 0 16vmin;
    border-left: 2vmin solid #0E3D58;
    border-bottom: 2vmin solid #0E3D58;
    border-radius: 2vmin 0 0 16vmin;
    transform-origin: 100% 0%;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    right: -30%;
    bottom: -65%;
    position: absolute;
    z-index: 1;
    -webkit-transition: .4s ease-in-out;
    -moz-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
}

.cat:hover .cat-tail {
    background-color: transparent;
    height: 20vmin;
    width: 9vmin;
    -moz-border-radius: 2vmin 0 0 16vmin;
    border-left: 2vmin solid #0E3D58;
    border-bottom: 2vmin solid #0E3D58;
    border-radius: 2vmin 0 0 16vmin;
    transform-origin: 100% 0%;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    right: -18%;
    bottom: -65%;
    position: absolute;
    z-index: 1;
    -webkit-transition: .4s ease-in-out;
    -moz-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
}

.cat-tail-end {
    width: 10vmin;
    height: 1.9vmin;
    position: absolute;
    bottom: -65%;
    right: -63%;
    background-color: #BFBFBF;
    border-radius: 0% 25% 25% 0%;
    transition: .4s ease-in-out;
}

.cat:hover .cat-tail-end {
    width: 10vmin;
    height: 1.9vmin;
    position: absolute;
    bottom: -65%;
    right: -51%;
    background-color: #BFBFBF;
    border-radius: 0% 25% 25% 0%;
    transition: .4s ease-in-out;
}
  
.cateye {
    position: absolute;
    overflow: hidden;
    width: 9vmin;
    height: 9vmin;
    border-radius: 50%;
    transform: scale(.65);
    bottom: 24.2%;
}

.cateye2 {
    position: absolute;
    overflow: hidden;
    width: 9vmin;
    height: 9vmin;
    border-radius: 50%;
    transform: scale(.65);
    bottom: 24.2%;
    left: 43%;
}

.cateye.inner {
  position: absolute;
  background: #FFCD66;
  padding: 0;
  width: auto;
  height: auto;
  border: none;
  margin: 0;
  left: 1%;
  right: 1%;
  bottom: 1%;
  top: 1%;
  transition: .4s ease-in-out;
}

.cateye.inner-2 {
  left: 25%;
  right: 25%;
  bottom: 25%;
  top: 25%;
  background: #000;
  transition: .4s ease-in-out;
  height:4vmin;
  width:4vmin;
}

.cat:hover .cateye.inner-2 {
  height:2vmin;
  width:2vmin;
  left: 40%; 
  top:40%;
  -webkit-animation: cateyes 6s ease-in-out 1;
  animation: cateyes 6s ease-in-out 1;
}

.cateyelid {
  position: absolute;
  height: 50%;
  left: 0;
  right: 0;
  background: #0E3D58;
  transition: margin 0.15s ease;
}

.cateyelid.top {
  display:block;
  top: 0;
  border-radius: 200px 200px 0 0;
}

.cateyelid.bottom {
    display: block;
    bottom: 0;
    border-radius: 0 0 200px 200px;
    margin-bottom: -50%;
    -webkit-animation: catblink 4s ease-in-out 2s infinite;
    animation: catblink 4s ease-in-out 2s infinite;
}

/* The animation code */
@keyframes catblink {
0% {margin-bottom: -50%;}
3% {margin-bottom: 0%;}
6% {margin-bottom: -50%;}
100% {margin-bottom: -50%;}
}

@-webkit-keyframes catblink {
0% {margin-bottom: -50%;}
3% {margin-bottom: 0%;}
6% {margin-bottom: -50%;}
100% {margin-bottom: -50%;}
}

@keyframes cattwitch {
0% {transform:rotate(30deg) skewX(-30deg) scale(1,.566);}
2% {transform:rotate(20deg) skewX(-30deg) scale(1,.566);}
4% {transform:rotate(30deg) skewX(-30deg) scale(1,.566);}
50% {transform:rotate(30deg) skewX(-30deg) scale(1,.566);}
100% {transform:rotate(30deg) skewX(-30deg) scale(1,.566);}
}

@-webkit-keyframes cattwitch {
0% {transform:rotate(40deg);}
20% {transform:rotate(30deg);}
50% {transform:rotate(30deg);}
100% {transform:rotate(30deg);}
}

@keyframes cateyes {
0% {height:2vmin; width: 2vmin; left: 40%; top:40%;}
18% {height:2vmin; width: 2vmin; left: 40%; top:40%;}
25% {height:2vmin; width: 2vmin; left: 20%; top:20%;}
42% {height:2vmin; width: 2vmin; left: 20%; top:20%;}
50%  {height:2vmin; width: 2vmin; left: 60%; top:20%;}
68%  {height:2vmin; width: 2vmin; left: 60%; top:20%;}
75%  {height:2vmin; width: 2vmin; left: 30%; top:70%;}
85%  {height:2vmin; width: 2vmin; left: 30%; top:70%;}
95% {height:2vmin; width: 2vmin; left: 40%; top:40%;}
100% {height:2vmin; width: 2vmin; left: 40%; top:40%;}
}

@-webkit-keyframes cateyes {
0% {height:2vmin; width: 2vmin; left: 40%; top:40%;}
20% {height:2vmin; width: 2vmin; left: 40%; top:40%;}
25% {height:2vmin; width: 2vmin; left: 20%; top:20%;}
42% {height:2vmin; width: 2vmin; left: 20%; top:20%;}
50%  {height:2vmin; width: 2vmin; left: 60%; top:20%;}
68%  {height:2vmin; width: 2vmin; left: 60%; top:20%;}
75%  {height:2vmin; width: 2vmin; left: 30%; top:70%;}
85%  {height:2vmin; width: 2vmin; left: 30%; top:70%;}
95% {height:2vmin; width: 2vmin; left: 40%; top:40%;}
100% {height:2vmin; width: 2vmin; left: 40%; top:40%;}
}

@keyframes meow {
0% {bottom: 120%;}
15% {bottom: 0%;}
50% {bottom: 120%;}
100% {bottom: 120%;}
}

@-webkit-keyframes meow {
0% {bottom: 120%;}
15% {bottom: 0%;}
50% {bottom: 120%;}
100% {bottom: 120%;}
}

.cat:hover .cateyelid {
    background: transparent;
}

.cat:hover .cat-ear {
    transform:rotate(40deg) skewX(-30deg) scale(1,.566);
    animation:none;
}

.cat:hover .cat-ear2 {
    transform:rotate(98deg) skewX(-30deg) scale(1,.566);
}

<head>
Code: 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<body>
Code: 
<div class="content">
<div class="card">
                <div class="cat">
                        <div class="cat-inner">                                
                        </div>
                        <div class="cat-head">
                           <div class="cat-ear"></div>
                           <div class="cat-ear2"></div>
                           <div class="cat-nose"></div>
                           <div class="cat-mouth"><div class="cat-meow"></div></div>
                               <div class="cateye">
                                <div class="cateye inner"></div>
                                <div class="cateye inner inner-2"></div>
                                <div class="cateyelid top"></div>
                                <div class="cateyelid bottom"></div>
                            </div>
                            <div class="cateye2">
                                <div class="cateye inner"></div>
                                <div class="cateye inner inner-2"></div>
                                <div class="cateyelid top"></div>
                                <div class="cateyelid bottom"></div>
                            </div>
                        </div>
                        <div class="cat-leg"></div>
                        <div class="cat-foot"></div>    
                        <div class="cat-leg-front"></div>
                        <div class="cat-foot-front"></div>        
                        <div class="cat-hind-leg"></div>
                        <div class="cat-hind-leg-top"></div>                
                        <div class="cat-hind-foot"></div>
                        <div class="cat-hind-paw"></div>
                        <div class="cat-hind-leg2"></div>
                        <div class="cat-hind-leg-top2"></div>                        
                        <div class="cat-hind-foot2"></div>
                        <div class="cat-hind-paw2"></div>
                        <div class="cat-tail"></div>    
                        <div class="cat-tail-end"></div>                        
                </div>
            </div>
</div>
Click to expand...
 
Advertise on BHW
Cute. Note sure I have a place for these on any of my sites, but I've worked with plenty of clients who would have loved these guys on their sites.
 
Very cute. Simple to implement. Not sure they have much use other than on a 404 page, but cool nonetheless.
 
CSS3 is awesome, I love working with it. Especially because so many people I know have javascript disabled nowadays.
 
Advertise on BHW
You must log in or register to reply here.
Sign up now!

Main Menu

Home Main Forum List Black Hat SEO White Hat SEO BHW Newbie Guide Blogging Black Hat Tools Social Media Downloads

Marketplace

Account Selling Content / Copywriting EBooks / Methods Hosting Misc Proxies For Sale SEO - Link building SEO - Packages Social Media Social Media - Panels Web Design More

Making Money

Affiliate Programs Hire a Freelancer IM Journeys Making Money Pay Per Click Site Flipping Want to Buy

BlackHat World

Dispute Resolution Forum Suggestions & Feedback Introductions Lounge
Back
Top