Categories
CSS HTML Web development

Working from home…with a Cat

When I am at home my cat is always next to me and he wants to do what I do. Cats are lovely creatures…

CSS Sleeping Cat

To create – Working from Home Animation..with the Cat follow the steps below:

*animation opened in the Safari browser.
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; 
}
CSS Laptop

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;
}
CSS Sleeping Cat

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!

Leave a Reply