Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="eng">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8"/>
    <title>Playing cat</title>
    <link type="text/css" rel="stylesheet" href="cat-style.css" />
</head>
<body>
​
<div class="container">
    <div class="ears"></div>
    <div class="head"></div>
    <div class="face"></div>
    <div class="eyes"></div>
    <div class="nose"></div>
    <div class="mouth"></div>
    <div class="left-leg"></div>
    <div class="fingers"></div>
    <div class="right-leg"></div>
    <div class="fingers2"></div>
    <div class="body"></div>
    <div class="hind-leg"></div>
    <div class="right-leg"></div>
    <div class="fingers3"></div>
    <div class="tail"></div>
    <div class="tip"></div>
​
</div>
​
</body>
</html>
 
* {
    box-sizing: border-box;
}
body {
    background: #e6f9af;    
}
.container,
.ears,
.head,
.face,
.eyes,
.nose,
.mouth,
.left-leg,
.fingers,
.fingers2,
.fingers3,
.right-leg,
.body,
.hind-leg,
.tail,
.tip {
    position: absolute; 
}
.container {
    width: 350px;
    height: 500px;
    margin: 0 auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;   
    overflow: hidden;
}
.container:after, 
.container:before {
        content: '';
        display: table; 
}
.container:after {
    clear: both;
}
.ears {
    width: 0;
    height: 0;
    border-left: 25px solid transparent; 
    border-right: 25px solid transparent; 
    border-bottom: 40px solid #18314f;
    top: 192px;
    left: 90px;
    outline: 0;
    transform: rotate(-25deg);
}
.ears::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 25px solid transparent; 
    border-right: 25px solid transparent; 
    border-bottom: 40px solid #18314f;
    position: absolute;
    top: 28px;
    left: 37px;
    outline: 0;
    transform: rotate(45deg);
}
.head {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    top: 200px;
    left: 100px;
    background: #18314f;
}
.face {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: white;
    top: 236px;
    left: 113px;
}
.face::after {
    content: '';
    position: absolute;
    top: 0;
    left: 49px;
    border-radius: 50%;
    background: white;
    width: 25px;
    height: 25px;
}
.eyes {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #0d0630;
    top: 243px;
    left: 113px;
    animation-name: eyes-move;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;  
}
@keyframes eyes-move {
    0% {left: 113px;}
    50% {left: 124px;}
    100% {left: 113px;}
}
.eyes::after {
    content: '';
    position: absolute;
    top: 0;
    left: 49px;
    border-radius: 50%;
    background: #0d0630;
    width: 15px;
    height: 15px;
}
.nose {
    width: 15px;
    height: 12px;
    top: 260px;
    left: 143px;
    background: #bf7878;
    border-radius: 50%;
}
.mouth {
    width: 20px;
    height: 10px; 
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border: 4px solid #bf7878;
    border-bottom: 0;
    top: 270px;
    left: 132px;
    transform: rotate(180deg);
}
.mouth::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 6px; 
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border: 4px solid #bf7878;
    border-bottom: 0;
    top: -3px;
    left: -21px;
    
}
.left-leg {
    width: 35px;
    height: 20px;
    background: #0d0630;
    border-radius: 35%;
    top: 288px;
    left: 100px;
    z-index: -1;
}
.fingers,
.fingers2,
.fingers3 {
    width: 7px;
    height: 12px;
    background: #384e77;
    border-radius: 45%;
    top: 294px;
    left: 112px;
}
​
.fingers::before,
.fingers2::before,
.fingers3::before {
    content: '';
    position: absolute;
    width: 7px;
    height: 12px;
    background: #384e77;
    border-radius: 45%;
    top: 0;
    left: -7px;
}
.fingers::after,
.fingers2::after,
.fingers3::after {
    content: '';
    position: absolute;
    width: 7px;
    height: 12px;
    background: #384e77;
    border-radius: 45%;
    top: 0;
    left: 7px;
}
.fingers2 {
    left: 168px;
    z-index: -1;
}
.fingers3 {
    top: 280px;
    left: 208px;
    z-index: 1;
}
.right-leg {
    width: 35px;
    height: 20px;
    background: #0d0630;
    border-radius: 35%;
    top: 288px;
    left: 155px;
    z-index: -1;
}
.body {
    width: 115px;
    height: 115px;
    background: #0d0630;
    border-radius: 50%;
    top: 188px;
    left: 102px;
    z-index: -2;
    
}
.body::after {
    content: '';
    position: absolute;
    width: 117px;
    height: 125px;
    top: -40px;
    left: 30px;
    background: #0d0630;
    border-radius: 50%;
    border-top: 4px solid #18314f;
    
}
.hind-leg {
    background: #0d0630;
    width: 33px;
    height: 85px;
    top: 200px;
    left: 210px;
    border-radius: 15px;
    transform: rotate(15deg);
    border-left: 4px solid #18314f;
}
.hind-leg  + div {
    top: 272px;
    left: 196px;
    z-index: 1;
    border-left: 4px solid #18314f;
}
.tail {
    top: 97px;
    left: 201px;
    width: 20px;
    height: 80px; 
    background: #0d0630;
    border-radius: 15px;
    transform: rotate(-10deg);
    z-index: -2;
    animation-name: tail-move;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;      
}
@keyframes tail-move {
    0% {transform: rotate(-10deg)}
    50% {transform: rotate(15deg)}
    100% {transform: rotate(-10deg)}
}
​
​
​
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers