纯css实现坤坤经典动作-“铁山靠”

本文介绍: 2023年2月16日，晴，今天没有工作，一直在掘金摸鱼，摸的我好累。不行！我得找点有意义的事情做！此时间，我发的一条沸点竟然有小黑子给我评论，我看到之后气不打一处来，哥哥这么努力，还有这么多人黑我家哥哥,作为工作时间一坤年的，我要尽我的绵薄之力还原哥哥的舞姿！让你们臣服！

2023年2月16日，晴，今天没有工作，一直在掘金摸鱼，摸的我好累。
不行！我得找点有意义的事情做！
此时间，我发的一条沸点竟然有小黑子给我评论，

我看到之后气不打一处来，哥哥这么努力，还有这么多人黑我家哥哥,
so！！！我打算为哥哥正名！

作为工作时间一坤年的ikun，我要尽我的绵薄之力还原哥哥的舞姿！
让你们臣服！

 border-radius: 65px 21px 76px 14px / 90px 17px 111px 26px;
//分别设置的是  左上 右上 右下 左下 / 左上 右上 右下 左下 的弧度

background-image: linear-gradient(to right, lightgrey, grey);

&lt;div id="kun"&gt;
      <div class="arms"&gt;
        <div class="arm arm-l"&gt;</div&gt;
        <div class="arm arm-r"&gt;</div>
      </div>
      
      <div class="leg leg-l"></div>
      <div class="leg leg-r"></div>
</div>

.arm{
  background-color: #333;
  position: absolute;
  top: 10px;
  z-index: 1;
  transform-origin: center top;
  width: 30px;
  height: var(--armLength);
  &amp;-l{
    left: 0;
    transform: rotate(50deg);
    border-radius: 0 0 30px 30px;
    &amp;::after{
      content: '';
      position: absolute;
      width: 26px;
      height: 80px;
      border-radius: 0 0 30px 30px;
      background-color: #333;
      left: 0;
      bottom: -70px;
      transform-origin: center top;
      transform: rotate(-100deg);
    }
  }
  &amp;-r ...
}

//头动画 
@keyframes headmove {
  25% {
    bottom: 210px;
  }
  50% {
    bottom: 195px;
  }
  75% {
   bottom: 170px;
  }
}
// 胳膊动画
@keyframes armmove {
  25% {
    width: 92%;
    top: 60px;
    left: 11%;
  }
  50% {
    width: 72%;
    top: 66px;
    left: 12%;
  }
  75% {
    width: 81%;
    top: 80px;
    left: 14%;
  }
}

//身体动画
@keyframes bodymove {
  25% {
    -webkit-clip-path: polygon(23% 13%, 100% 0%, 75% 100%, 0% 100%);
    clip-path: polygon(23% 13%, 100% 0%, 75% 100%, 0% 100%);
  }
  50% {
    -webkit-clip-path: polygon(17% 16%, 63% 29%, 75% 100%, 0% 100%);
    clip-path: polygon(17% 16%, 63% 29%, 75% 100%, 0% 100%);
  }
  75% {
    -webkit-clip-path: polygon(24% 27%, 90% 38%, 75% 100%, 0% 100%);
    clip-path: polygon(24% 27%, 90% 38%, 75% 100%, 0% 100%);
  }
}