一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第19天，点击查看活动详情。

我正在参加 码上掘金体验活动，详情：show出你的创意代码块

嗨！大家好！我是手可摘棉花，一名前端开发，很开心在这里分享文章，期待着大家的点赞👍与关注➕。

介绍

今天来给大家介绍一下纯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动画旋转等.以上内容就介绍到这里,下期再见,感谢大家的观看与支持,谢谢~