纯CSS实现 | 可爱的小怪兽动画

嗨，大家好，我是小棉花，一名前端开发，很开心在这里分享文章。如果您喜欢我的文章，欢迎点赞➕关注❤️。

介绍

今天来给大家介绍一下纯css实现活泼可爱的小怪兽动画效果，本文涉及的知识点看过前面的文章应该也有所了解，html+css，css3动画效果，还有遮罩层使用。下面来给大家详细介绍一下整个制作的过程。

代码介绍

本文小怪兽动画分成两部分完成，一是完成小怪兽制作，二给小怪兽添加动画效果，看起来活泼可爱一点。

1.小怪兽制作

小怪兽分为头部+眼睛+手+腿几部分完成。

1.1 小怪兽头部+眼睛

小怪兽的眼睛制作水平排列三个用display: flex；水平排列，每个位置不同通过定位调整距离高度。

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>

样式:

.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 小怪兽头上环制作

html:

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

样式:

.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 小怪兽耳朵制作

耳朵比较弯曲圆弧，这个有点难度，画了圆形+三角形遮挡+直线倾斜拼接一起。

html:

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

样式:

.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 小怪兽腿制作

小怪兽腿制作相对于比较简单，画了两个椭圆形，定位，然后设置z-index: -1；位于头的底层遮挡。左边复制一份给右边，定位调整一下就完成。

html:

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

样式：

.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.小怪兽动画

我给小怪兽添加了眼睛动画和小怪兽的动画。

2.1 眼睛动画

眼睛添加了眼珠子左右摆动动画。

样式:

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

2.2 小怪兽本身动画

小怪兽添加了左右上下旋转一定角度的摆动，让小怪兽看起来活泼可爱一点，这个细节调了比较久，刚开始加的时候跳动比较生硬。

样式:

.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);
  }
}

效果：

总结

本文介绍了小怪兽的制作跟动画的流程，使用不同图层或伪类遮罩层使用，使用弹性布局，css3动画旋转等。以上内容就介绍到这里，下期再见，感谢大家的观看与支持，谢谢~☺(^_−)☆

本文参与了思否技术征文，欢迎正在阅读的你也加入。