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

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

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

介绍

今天来给大家介绍一下纯css实现丑萌丑萌的小熊猫动画效果,本文涉及的知识点看过前面的文章应该也有所了解,html+css,css3动画效果,旋转，放大动画使用.下面来给大家详细介绍一下整个制作的过程.

代码块

code.juejin.cn/pen/7089266…

代码介绍

本文小熊猫动画分成两部分完成,一是完成小熊猫制作,二给小熊猫添加动画效果，动画意思是小熊猫小手求抱抱的动画，旁边几个小星星放大闪动的效果。

1. 小熊猫的制作

小熊猫的制作分为头部（包括眼睛+鼻子+耳朵），身体，小手，小腿。

1.1 小熊猫的头部（包括眼睛+鼻子+耳朵）

这部分实现是整个制作中比较多内容的部分，小熊猫的脸部外形篇肥嘟嘟，可能我调节的还不够很好，通过圆角去调节；鼻子两边的两边撇使用的圆角不同颜色的折叠遮罩，耳朵也是椭圆形通过定位左右两侧。用了旋转跟圆角属性还有定位去操作。

html：

<div class="head-box">
    <div class="eye"></div>
    <div class="eye eye-right"></div>
    <div class="nose">
      <div class="nose-line"></div>
      <div class="nose-line nose-line2"></div>
      <div class="nose-round"></div>
    </div>
    <div class="ear"></div>
    <div class="ear ear-right"></div>
  </div>

样式：

.head-box{
  width: 230px;
  height: 200px;
  background: #fff;
  border: 4px solid;
  border-radius: 95% 74% 74% 60%/67% 81% 58% 63%;
  position: relative;
}
.eye{
  width: 40px;
  height: 42px;
  background: #020202;
  border-radius: 74% 40% 65% 38%;
  position: absolute;
  top: 95px;
  left: 40px;
  transform: rotate(-10deg);
  z-index: 2;
}
.eye::after{
  content: "";
  width: 8px;
  height: 10px;
  background: #fff;
  border-radius: 80% 26% 74% 38%;
  position: absolute;
  left: 20px;
  top: 9px;
  transform: rotate(0);
}
.eye-right{
  left: 140px;
  transform: rotate(-80deg);
}
.eye-right::after{
  left: 23px;
  top: 12px;
  transform: rotate(-65deg);
}

.nose{
  position: absolute;
  top: 105px;
  left: 100px;
}
.nose-round{
  width: 24px;
  height: 18px;
  background: #020202;
  border-radius: 0 60% 70% 80%;
  position: absolute;
}
.nose-line{
  width: 32px;
  height: 14px;
  background: #020202;
  border-radius: 50%;
  position: absolute;
  top: 12px;
  left: -16px;
  transform: rotate(-36deg);
}
.nose-line::after{
  content: "";
  width: 32px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: -6px;
  left: 0px;
  transform: rotate(-4deg);
}

.nose-line2{
  left: 6px;
  transform: rotate(32deg);
}
.nose-line2::after{
  top: -6px;
  left: 0px;
  transform: rotate(-4deg);
}

/* 耳朵 */
.ear{
  width: 90px;
  height: 100px;
  background: #020202;
  border-radius: 60%;
  position: absolute;
  left: -28px;
  top: -16px;
  z-index: -1;
}
.ear-right{
  left: 154px;
}

1.2 小熊猫的身体，手,腿

小熊猫身体画的比头小一些，显得可爱一点，小手画的长一些对于后期的小手求抱抱动画比较好，小腿画的短一点。

html：

<div class="body">
    <div class="body-r"></div>
    <div class="hand hand-left"></div>
    <div class="hand hand-right"></div>
    <div class="leg leg-left"></div>
    <div class="leg leg-right"></div>
</div>

样式：

.body{
  position: absolute;
  left: 51px;
  top: 181px;
  z-index: -1;
}
.body-r{
  width: 150px;
  height: 104px;
  border-radius: 52px 50px 42px 42px;
  border: 4px solid;
  background: #fff;
}

/* 手 */
.hand{
  width: 50px;
  height: 100px;
  background: #020202;
  border-radius: 46%;
  position: absolute;
  top: -42px;
  left: -48px;
  z-index: -1;
  transform: rotate(128deg);
}
.hand-right{
  left: 132px;
  transform: rotate(63deg);
}

/* 腿 */
.leg{
  width: 45px;
  height: 48px;
  background: #020202;
  border-radius: 0 0 32% 84%;
  position: absolute;
  top: 87px;
  left: 18px;
  z-index: -1;
  transform: rotate(6deg);
}
.leg-right{
  left: 101px;
  border-radius: 0 0 84% 32%;
  transform: rotate(-10deg);
}

1.3 小星星实现

html：

<div class="star1">✦</div>
<div class="star1 star2">✦</div>
<div class="star1 star3">✦</div>

样式：

.star1{
  font-size: 52px;
  color: #FCFFB5;
  position: absolute;
  top: 74px;
  left: -96px;
  transform: rotate(9deg) skew(27deg,-13deg);
}
.star2{
  top: -52px;
  left: 280px;
  font-size: 90px;
  transform: rotate(30deg) skew(27deg,-13deg);
}
.star3{
  top: 224px;
  left: 238px;
  font-size: 40px;
  transform: rotate(30deg) skew(27deg,-13deg);
}

2. 小熊猫动画和小星星闪动实现

2.1 小熊猫求抱抱动画

小熊猫求抱抱动画先实现左手动画再实现右手动画， 左边通过控制动画基点transform-origin: right top;调整小手的位置，再通过动画旋转角度添加过去transform: rotate(106deg); 角度差不多就行，弄起来看得流畅就好，右侧一样的道理。

样式

.hand-left{
  top: 56px;
  left: -45px;
  transform-origin: right top;
  animation: swing 0.5s linear infinite alternate;
}
@keyframes swing{
  0%{
    transform: rotate(106deg);
  }
  100%{
    transform: rotate(132deg);
  }
}
.hand-right{
  top: -90px;
  left: 112px;
  transform-origin: left bottom;
  animation: swingR 0.5s linear infinite alternate;
}
@keyframes swingR{
  0%{
    transform: rotate(68deg);
  }
  100%{
    transform: rotate(43deg);
  }
}

2.2 小星星闪动动画

小星星闪动动画就是简单的放大缩小调整一下透明度就行。

样式：

.star1{
  animation: flash 0.3s ease infinite alternate;
}
@keyframes flash{
  0%{
    transform: scale(1.5);
    opacity: 0.6;
  }
  50%{
    transform: scale(1.2);
    opacity: 0.8;
  }
  100%{
    transform: scale(1);
    opacity: 1;
  }
}

总结

本文主要介绍了小熊猫制作还有求抱抱的动画过程，制作过程是比较繁琐的，一步步的通过css绘画，慢慢调节细节，圆角用的比较多。以上就介绍到这里，感谢大家的观看，谢谢~