cartoon animation using css

3 minute read

cartoon animation using css

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Doraemon animation</title>
<style>

   body {
      background-color: black;
    }

    .fan {
    margin: 0;
    padding: 0;
    display: block;
    position: absolute;
    width: 400px;
    height: 50px;
    background-color: white;
    border-radius: 100%;
    left: 60px;
    top: -140px;
    transform: rotate(180deg);
    animation-name: fan;
    animation-duration: 0.12s;
    animation-iteration-count: infinite;
}

    .stand {
      display: block;
      position: absolute;
      left: 260px;
      top: -90px;
      margin: 0;
      padding: 0;
      width: 8px;
      height: 100px;
      background-color: white;
    }

.container {
    padding: 10px;
    margin: 0;
    box-sizing: border-box;
    display: block;
    position: absolute;
    left: 0;
    top: 40%;
}

h4 {
    text-align: center;
    color: red;
    margin-left: 20%;
    font-family: courier;
}
.head {
    width: 510px;
    height: 520px;
    background-color: blue;
    border-radius: 100%;
}

.face {
    width: 430px;
    height: 440px;
    background-color: white;
    border-radius: 100%;
    transform: translate(0px, 79px);
}
.eye1 {
    width: 120px;
    height: 140px;
    border-radius: 100%;
    background-color: white;
    transform: translate(-53px , -50px);
    box-shadow: 2px 2px 20px 2px #989898;
}

.pupil1 {
    width: 65px;
    height: 90px;
    border-radius: 100%;
    transform: translate(24px , 20px);
    background-color: black;
    animation-name: rotate1;
    animation-duration: 4s;
    animation-delay: 1s;
    animation-iteration-count: 2;
}
.eye2 {
    width: 120px;
    height: 140px;
    border-radius: 100%;
    background-color: white;
    transform: translate(68px , -190px);
    box-shadow: 2px 2px 20px 2px #989898;
}

.pupil2 {
    width: 65px;
    height: 90px;
    border-radius: 100%;
    transform: translate(-25px , 20px);
    background-color: black;
    animation-name: rotate2;
    animation-duration: 4s;
    animation-delay: 1s;
    animation-iteration-count: 2;
}

.nose {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background-color: red;
    transform: translate(8px,-210px);
    box-shadow: 2px 2px 20px 2px #989898;
}
.noseline {
    width: 5px;
    height: 150px;
    background-color: black;
   transform: translate(10px, -210px);
   box-shadow: 2px 2px 20px 2px #989898;
}

.mouth {
    width: 80px;
    height: 100px;
    background-color: #900606;
    border-radius: 30%;
    transform: translate(10px, -210px);
    overflow: hidden;
    box-shadow: 2px 2px 20px 2px #989898;
}

.tounge {
    width: 80px;
    height: 120px;
    background-color: orangered;
    border-radius: 20%;
    transform: translate(-30px, 0px) rotate(120deg);
}

.beard1 {
    background-color: black;
    width: 150px;
    height: 5px;
    transform: translate(-100px,-450px) rotate(15deg);
    border-radius: 200%;
    box-shadow: 2px 2px 20px 2px #989898;
}
.beard2 {
    background-color: black;
    width: 150px;
    height: 5px;
    transform: translate(-100px,-410px);
    border-radius: 100%;
    box-shadow: 2px 2px 20px 2px #989898;
}

.beard3 {
    background-color: black;
    width: 150px;
    height: 5px;
    transform: translate(-100px,-370px) rotate(-15deg);;
    border-radius: 100%;
    box-shadow: 2px 2px 20px 2px #989898;
}

.beard4 {
    background-color: black;
    width: 150px;
    height: 5px;
    transform: translate(110px,-470px) rotate(165deg);
   border-radius: 100%;
   box-shadow: 2px 2px 20px 2px #989898;
}

.beard5 {
    background-color: black;
    width: 150px;
    height: 5px;
   transform: translate(110px,-425px);
   border-radius: 100%;
   box-shadow: 2px 2px 20px 2px #989898;
}

.beard6 {
    background-color: black;
    width: 150px;
    height: 5px;
   transform: translate(110px,-385px) rotate(190deg);
   border-radius: 100%;
   box-shadow: 2px 2px 20px 2px #989898;
}
a {
      display: block;
      margin-top: 10%;
      margin-left: 30%;
      text-decoration: none;
      font-size: bold;
      color: black;
      background-color: orange;
      width: 90px;
      height: 30px;
      padding: 12px 20px 0 20px;
      box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    }
    a:hover {
      background-color: #087A7C;
    }
    @keyframes rotate1 {
    50% { transform: translate(-27px,20px); }
    100% { transform: translate(27px , 20px); }
}

    @keyframes rotate2 {
    50% { transform: translate(27px,20px); }
    100% { transform: translate(-27px , 20px); }
    }

     @keyframes fan {
     0% {transform: rotateY(0deg);}
     100% {transform: rotateY(180deg);}
    }
</style>
</head>
<body>
<center>
   <h4>Doraemon animation by redxcyber </h4>
   <div class="container">
    <div class="fan">
     <div class="spot"></div>
    </div>
    <div class="stand"></div>
    <div class="head">
     <div class="face">
      <div class="eye">
       <div class="eye1">
        <div class="pupil1"></div>
       </div>
       <div class="eye2">
        <div class="pupil2"></div>
       </div>
      </div>
      <div class="nose"></div>
      <div class="noseline"></div>
      <div class="mouth">
       <div class="tounge"></div>
      </div>
      <div class="beard">
       <div class="beardr">
        <div class="beard1"></div>
        <div class="beard2"></div>
        <div class="beard3"></div>
        <div class="beardl">
         <div class="beard4"></div>
         <div class="beard5"></div>
         <div class="beard6"></div>
        </div>
       </div>
      </div>
     </div>
    </div>
   </div>
   <a href="https://youtube.com/shorts/hnd5SLGJSRM?feature=share"> T u t o r i a l </a>
</center>
</body>
</html>

cartoon animation using css

cartoon animation using css

You may like these posts