乐趣区

关于前端:纯CSS实现-可爱的小怪兽动画

jiezi

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

介绍

明天来给大家介绍一下纯 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 动画旋转等。以上内容就介绍到这里，下期再见，感激大家的观看与反对，谢谢~☺(^_−)☆

本文参加了思否技术征文，欢送正在浏览的你也退出。

退出移动版