When I am at home my cat is always next to me and he wants to do what I do. Cats are lovely creatures…
To create – Working from Home Animation..with the Cat follow the steps below:
To see the live output of the animation click here.
Step1.
Add HTML
<div class="container">
<div class="laptop">
<div class="bottom"></div>
<div class="top"></div>
<div class="screen"></div>
<div class="screen1"></div>
<div class="screen2"></div>
<div class="deleting"><h1>Deleting...</h1></div>
<div class="shadow"></div>
<div class="head"></div>
<div class="body"></div>
<div class="paw"></div>
<div class="paw1"></div>
<div class="tail"></div>
<div class="ear"></div>
<div class="ear1"></div>
<div class="face"></div>
<div class="eyes"></div>
<div class="mouth"></div>
</div>
</div>
Step2.
Add CSS
Ste the size and the colour of the background and the container.
body {
height:100vh;
background-color:#4ED2BA;
}
.container {
position: relative;
}Style the laptop:
.laptop {
position: relative;
left: 40%;
top: 350px;
}
.bottom {
position: absolute;
width: 400px;
height: 30px;
background-color: #DEDEDE;
border-radius: 100px;
border: 5px solid #767676;
box-shadow:inset -55px -10px 0 rgba(0,0,0,0.07);
}
.bottom:after {
content:"";
position: absolute;
width: 100px;
height: 10px;
background-color: #DEDEDE;
border: 5px solid #767676;
left: 145px;
top:-5px;
border-radius: 0 0 50px 50px;
box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
}
.bottom:before {
content:"";
position: absolute;
width: 200px;
height: 30px;
background-color: #DEDEDE;
border-radius: 100px;
border: 5px solid #767676;
left: 350px;
top:-5px;
box-shadow:inset 15px -10px 0 rgba(0,0,0,0.07);
}
.top {
position: absolute;
width: 80px;
height: 10px;
background-color: #767676;
border-radius: 100px;
top: 15px;
left: 370px;
}
.top:after {
content:"";
position: absolute;
width: 40px;
height: 10px;
background-color: #767676;
border-radius: 100px;
left: 90px;
}
.top:before {
content:"";
position: absolute;
background-color: #767676;
border-radius: 100px;
width: 15px;
height: 15px;
left: 140px;
top:-3px;
}
.shadow {
position: absolute;
width: 600px;
height: 50px;
background-color: black;
border-radius: 50%;
left:-15px;
z-index:-1;
top:10px;
opacity:0.7;
}
.screen {
position: absolute;
width: 460px;
height: 250px;
background-color:#404040;
top:-280px;
z-index:-10;
left:80px;
border-radius: 50px;
transform: skew(-10deg);
border: 20px solid #DEDEDE;
box-shadow:inset 15px -10px 0 rgba(0,0,0,0.07);
}
.screen1 {
position: absolute;
width: 500px;
height: 300px;
background-color:#767676;
transform: skew(-10deg);
border-radius: 50px;
top:-280px;
z-index:-15;
left:85px;
}
Add a sleeping cat:
.body {
position: absolute;
width: 300px;
height: 160px;
background-color: #F1C40F;
border-top-left-radius: 170px;
border-top-right-radius: 170px;
border: 10px solid #F1C40F;
border-bottom: 0;
left: 30px;
top: -170px;
z-index:20;
}
.head {
position: absolute;
width: 150px;
height: 100px;
background-color: #F4D03F;
border-top-left-radius: 90px;
border-top-right-radius: 90px;
border: 10px solid #F4D03F;
border-bottom: 0;
left: 220px;
top: -110px;
z-index:21;
}
.paw {
position: absolute;
background-color: #F1C40F;
width: 45px;
height: 130px;
border-radius: 0 0 100px 100px;
left: 170px;
box-shadow:inset 0px -25px 0 white;
overflow:hidden;
}
.paw:after {
content:"";
position: absolute;
background-color:#613A17;
width:5px;
height:15px;
left: 10px;
top:115px;
}
.paw:before {
content:"";
position: absolute;
background-color:#613A17;
width:5px;
height:15px;
left: 25px;
top:115px;
}
.paw1 {
position:absolute;
border-radius:50%;
background-color: #fff;
width:40px;
height:40px;
border: 5px solid #F1C40F;
overflow:hidden;
left:370px;
top:-30px;
z-index:25;
}
.paw1:after {
content:"";
position: absolute;
background-color:#613A17;
width:5px;
height:25px;
left: 10px;
top:22px;
}
.paw1:before {
content:"";
position: absolute;
background-color:#613A17;
width:5px;
height:25px;
left: 25px;
top:22px;
}
.tail {
position:absolute;
background-color: #F1C40F;
width: 35px;
height: 180px;
border-radius: 0 0 100px 100px;
left:30px;
top:-20px;
transform-origin: top center;
animation: swing 4s ease infinite;
}
.ear {
position:absolute;
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 60px solid #F4D03F;
left: 230px;
top:-140px;
z-index:30;
transform:rotate(-25deg);
}
.ear:after {
content:"";
position:absolute;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 40px solid #F1948A;
left: -15px;
top:10px;
}
.ear1 {
position:absolute;
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 60px solid #F4D03F;
left: 325px;
top:-140px;
z-index:30;
transform:rotate(25deg);
}
.ear1:after {
content:"";
position:absolute;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 40px solid #F1948A;
left: -15px;
top:10px;
}
.face {
position:absolute;
width: 75px;
height: 50px;
background-color: #FCF3CF;
border-top-left-radius: 90px;
border-top-right-radius: 90px;
border: 10px solid #FCF3CF;
border-bottom: 0;
left: 260px;
top: -60px;
z-index:25;
}
.face:after {
content:"";
position:absolute;
width:20px;
height:20px;
background-color:#F9E79F;
border-radius:100px 100px 0 0;
left:25px;
top:-10px;
}
.face:before {
content:"";
position:absolute;
width:20px;
height:20px;
background-color:#F5B7B1;
border-radius:0 0 100px 100px;
left:25px;
top:0;
}
.eyes {
position:absolute;
border-radius: 50%;
box-shadow:inset 0 -5px 0 black;
width: 30px;
height:30px;
left:330px;
top:-80px;
z-index:30;
}
.eyes:after {
content:"";
position:absolute;
border-radius: 50%;
box-shadow:inset 0 -5px 0 black;
width: 30px;
height:30px;
left:-70px;
top:0;
}
.mouth {
position:absolute;
z-index:30;
border-radius:50%;
background-color:black;
width:20px;
height:20px;
top:-28px;
left:300px;
animation: scale 1s infinite ease-in-out alternate;
}Add the desktop:
.screen2 {
position: absolute;
background-color: #FEF9E7;
width: 150px;
height: 10px;
border: 5px solid black;
border-radius:30px;
top:-160px;
left: 250px;
overflow:hidden;
transform: skew(-20deg);
}
.screen2:after {
content:"";
position: absolute;
height:10px;
width: 20px;
left: 20px;
background-color: #52C2D3;
transform: skew(-20deg);
animation: 3s move linear infinite;
}
.screen2:before {
content:"";
position: absolute;
left: 80px;
height:10px;
width: 20px;
background-color: #D35252;
transform: skew(-20deg);
animation: 3.5s move linear infinite;
}
.deleting {
position: absolute;
top: -240px;
left: 250px;
color: red;
animation: flash 500ms ease infinite alternate;
}
Step3.
Add CSS Animation
For the sleeping cat (mouth and tail):
@keyframes scale {
from { transform: scale(0.8); }
to { transform: scale(1); }
}
@keyframes swing {
20% { transform: rotate(15deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }
80% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}For the desktop (caption and progress bar):
@keyframes flash {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes move {
100% {left: -160px}
from {left: -80px;}
to {left: 180px;}
} To see the live output of the animation go to:lenastanley.com.
Enjoy coding!