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

时间：2023-03-27 23:28:05 HTML

大家好，我是前端开发者小棉，很高兴在这里分享文章。如果喜欢我的文章，请点赞?关注??。简介今天给大家介绍一下纯css实现活泼可爱的小怪兽动画效果。看完前面的文章，html+css，css3动画效果，遮罩层的使用你也应该明白本文涉及的知识点了。下面详细介绍一下整个制作过程。代码介绍本文中的小怪兽动画分为两部分，一是完成小怪兽的制作，二是给小怪兽添加动画效果，看起来更加活泼可爱。1.制作小怪兽小怪兽分为几个部分：头+眼睛+手+腿。1.1小怪兽的头+眼睛小怪兽的眼睛横向排列三个，使用display:flex;水平排列，每个位置不同，通过定位调整距离和高度。html：

样式:.head{width:112px;高度：100px；背景：#DFEF91；边框：2px实心；边界半径：56%60%/60%60%；position:relative;}/*眼睛*/.eye-con{display:flex;位置：绝对；顶部：50px；左：14px；}.eye{宽度：24px；高度：24px；背景：#fff；边界半径：48%；边框：1.5px实心；位置：相对；}.eye::after{内容：“”；宽度：12px；高度：12px；背景：#131313；边界半径：50%；位置：绝对；右：1px；top:8px;}.eye2{margin-left:4px;margin-top:-8px;}.eye3{margin-left:4px;}.eye2::after{右：5px；上：9px;}.eye3::after{右：10px;top:10px;}1.2小怪兽头上环制html:??style:.head-top{position:absolute;top:-20px;left:48px;width:6px;height:20px;border-radius:12px；背景：#DFEF91；边框：1.5px实心；z-index：-1；}.head-top.round{宽度：14px；高度：12px；背景：#DFEF91；边框：1.5px实心；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:

样式:.ear{width:24px;高度：30px；背景：#DFEF91；边界半径：0020%112%；边框：1.5px实心；位置：绝对；左：-20px；顶部：40px；z-index:-1;}.ear-inside{border-top:24pxsolid#fff;border-right:24pxsolid#fff;border-bottom:30px实心透明；左边框：30px实心透明；位置：绝对；左：-21px；顶部：-18px；z-index:-1;}.ear-inside::after{内容:"";宽度：1.5px；高度：28px；背景：#131313；位置：绝对；左：2px；顶部：-12px；变换：旋转（-52deg）；}.ear-right{左：106px；border-radius:020%112%0;}.ear-right.ear-inside{border-left:24pxsolid#fff;border-top:24pxsolid#fff;底部边框：30px固体透明；border-right:30pxsolidtransparent;左：-8px；}.ear-right.ear-inside::after{左：-4px；顶部：-12px；transform:rotate(52deg);}1.4小怪兽腿的制作小怪兽腿的制作比较简单。画两个椭圆，定位，然后设置z-index：-1；从头部底层左侧复制一份到右侧，调整定位完成。html:

样式：.leg{宽度：16px；高度：26px；背景：#DFEF91；边界半径：60%；边框：1.5px实心；位置：绝对；顶部：76px；左：20px；变换：旋转（20度）；:rotate(-20deg);}2.小怪兽动画我给小怪兽加了眼睛动画和小怪兽动画。2.1眼睛动画眼睛添加了眼球左右摆动的动画。style:.eye::after{动画：转0.4s线性无限交替；}@keyframes转{0%{right:11px;}100%{右：1px；}}2.2小怪物本身是动画的。小怪兽增加了左右上下旋转和一定角度的摆动，让小怪兽看起来更加活泼可爱。这个细节调整了很久，刚加的时候跳动比较生硬。Style:.monster{animation:move0.3sease-in-out无限交替;}@keyframesmove{0%{top:-30px;左：40px；变换：旋转（-30deg）；}100%{顶部：-10px；左：40px；变换：旋转（30度）；}}Effect:Summary本文介绍了小怪兽的制作和动画过程，使用不同的图层或者伪遮罩图层，使用弹性布局，css3动画旋转等。以上内容就介绍到这里了，下期再见，感谢大家的观看和支持，谢谢~?(^_?)☆本文参与技术征文征集，正在阅读的欢迎您的加入。

上一篇：《菜农升职记》的Websocket

下一篇：Java单例模式总有你想不到的知识

纯CSS实现-可爱的小怪兽动画相关文章