Pure CSS implementation | cute little monster animation

Hi, everyone, I'm Xiao Mian, a front-end developer, and I'm very happy to share articles here. If you like my article, please like ➕ follow ❤️.

introduce

Today, I will introduce you to pure css to achieve lively and cute little monster animation effects. The knowledge points involved in this article should be familiar with the previous articles, html+css, css3 animation effects, and the use of mask layers. Below is a detailed description of the entire production process.

Code introduction

This article is divided into two parts to complete the little monster animation, one is to complete the production of the little monster, and the other is to add animation effects to the little monster, which looks lively and cute.

1. The production of little monsters

The little monster is divided into several parts: head + eyes + hands + legs.

1.1 Little monster head + eyes

The eyes of the little monster are arranged in three horizontal lines with display: flex; horizontal arrangement, each position is different by adjusting the distance and height by positioning.

html:

 <div class="head">
    <div class="eye-con">
      <div class="eye eye1"></div>
      <div class="eye eye2"></div>
      <div class="eye eye3"></div>
    </div>
</div>

style:

 .head{
  width: 112px;
  height: 100px;
  background: #DFEF91;
  border: 2px solid;
  border-radius: 56% 60%/60% 60%;
  position: relative;
}
/* 眼睛 */
.eye-con{
  display: flex;
  position: absolute;
  top: 50px;
  left: 14px;
}
.eye{
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 48%;
  border: 1.5px solid;
  position: relative;
}
.eye::after{
  content: "";
  width: 12px;
  height: 12px;
  background: #131313;
  border-radius: 50%;
  position: absolute;
  right: 1px;
  top: 8px;
}
.eye2{
  margin-left: 4px;
  margin-top: -8px;
}
.eye3{
  margin-left: 4px; 
}
.eye2::after{
  right: 5px;
  top: 9px;
}
.eye3::after{
  right: 10px;
  top: 10px;
}

1.2 Making the ring on the head of the little monster

html:

 <div class="head-top">
    <div class="round"></div>
</div>

style:

 .head-top{
  position: absolute;
  top: -20px;
  left: 48px;
  width: 6px;
  height: 20px;
  border-radius: 12px;
  background: #DFEF91;
  border: 1.5px solid;
  z-index: -1;
}
.head-top .round{
  width: 14px;
  height: 12px;
  background: #DFEF91;
  border: 1.5px solid;
  border-radius: 48%;
  position: absolute;
  top: -6px;
  left: -6px;
}
.head-top .round::after{
  content: "";
  position: absolute;
  bottom: -2px;
  left: 3px;
  width: 8px;
  height: 10px;
  background: #DFEF91;
  border-radius: 48%;
}

1.3 Making little monster ears

The ears are more curved and arc, this is a bit difficult, draw a circle + triangle occlusion + straight line slanting and splicing together.

html:

 <div class="ear ear-left">
  <div class="ear-inside"></div>
</div>
<div class="ear ear-right">
  <div class="ear-inside"></div>
</div>

style:

 .ear{
    width: 24px;
    height: 30px;
    background: #DFEF91;
    border-radius: 0 0 20% 112%;
    border: 1.5px solid;
    position: absolute;
    left: -20px;
    top: 40px;
    z-index: -1;
}
.ear-inside{
  border-top: 24px solid #fff;
  border-right: 24px solid #fff;
  border-bottom: 30px solid transparent;
  border-left: 30px solid transparent;
  position: absolute;
  left: -21px;
  top: -18px;
  z-index: -1;
}
.ear-inside::after{
  content: "";
  width: 1.5px;
  height: 28px;
  background: #131313;
  position: absolute;
  left: 2px;
  top: -12px;
  transform: rotate(-52deg);
}
.ear-right{
  left: 106px;
  border-radius: 0 20% 112% 0;
}
.ear-right .ear-inside{
  border-left: 24px solid #fff;
  border-top: 24px solid #fff;
  border-bottom: 30px solid transparent;
  border-right: 30px solid transparent;
  left: -8px;
}
.ear-right .ear-inside::after{
  left: -4px;
  top: -12px;
  transform: rotate(52deg);
}

1.4 Making Little Monster Legs

The production of the little monster legs is relatively simple. Two ovals are drawn, positioned, and z-index: -1 is set; it is located at the bottom layer of the head. Copy a copy on the left to the right, and adjust the positioning to complete.

html:

 <div class="leg leg-left"></div>
<div class="leg leg-right"></div>

style:

 .leg{
  width: 16px;
  height: 26px;
  background: #DFEF91;
  border-radius: 60%;
  border: 1.5px solid;
  position: absolute;
  top: 76px;
  left: 20px;
  transform: rotate(20deg);
  z-index: -1;
}
.leg-right{
  left: 80px;
  transform: rotate(-20deg);
}

2. Little monster animation

I added eye animations and little monster animations to the little monster.

2.1 Eye animation

Eyes Added animation of eyeballs swinging from side to side.

style:

 .eye::after{
  animation: turn 0.4s linear infinite alternate;
}
@keyframes turn{
  0%{
    right: 11px;
  }
  100%{
    right: 1px;
  }
}

2.2 The animation of the little monster itself

The little monster has added a swing that rotates left and right up and down at a certain angle, making the little monster look more lively and cute. This detail has been adjusted for a long time.

style:

 .monster{
  animation: move 0.3s ease-in-out infinite alternate;
}
@keyframes move{
  0%{
    top: -30px;
    left: 40px;
    transform: rotate(-30deg);
  }
  
  100%{
    top: -10px;
    left: 40px;
    transform: rotate(30deg);
  }
}

Effect:

Summarize

This article introduces the production and animation process of little monsters, using different layers or pseudo-type mask layers, using elastic layout, css3 animation rotation, etc. The above content is introduced here, see you in the next issue, thank you for watching and supporting, thank you~☺(^_−)☆

This article participated in the Sifu technical essay , and you are welcome to join.