嗨，大家好，我是小棉花，一名前端开发，很开心在这里分享文章。如果您喜爱我的文章，欢送点赞➕关注❤️。
介绍
明天来给大家介绍一下纯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动画旋转等。以上内容就介绍到这里，下期再见，感激大家的观看与反对，谢谢~☺(^_−)☆
本文参加了思否技术征文，欢送正在浏览的你也退出。