背景

2023年2月16日 
  
  
  
  
  
  
  
，晴 
  
  
  
  
  
  
  
 ，今天没有工作

 


 


 


 


 


 


 


 ，一直在掘金摸鱼 
 
 
 
 
 
 
 
，摸的我好累                。

不行！我得找点有意义的事情做！

此时间 
   
   
   
   
   
   
   
 ，我发的一条沸点竟然有小黑子给我评论
 

 

 

 

 

 

 

 ，\

我看到之后气不打一处来
 

 

 

 

 

 

 

 
，哥哥这么努力               ，还有这么多人黑我家哥哥,

so！！！ 我打算为哥哥正名！

作为工作时间一坤年的ikun



 
 

 
 

 
 

 
 

 
 

 
 

 
 

 ，我要尽我的绵薄之力还原哥哥的舞姿！

让你们臣服！

开搞

1. 构思

选择题材阶段















，我毫不犹豫决定实现坤坤的经典“铁山靠                ”动作； 然后就是思考怎么实现了                       ，定几个要实现的关键要素； 实现帅气中分发型； 实现身着背带裤的潇洒身型； 实现铁山靠动作； 优化细节
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 。

代码就不往文章里贴了 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，最后直接在码上掘金在线看吧-.-

2. 绘制帅气的中分发型

先画个头























，设置弧度border-radius:50%画个圆将就一下； 所有头发颜色               ，裤子颜色 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  ，皮肤颜色















，都是用浏览器自带的取色器从坤坤的图片上吸的颜色； 中分发型分为两瓣儿 
  
  
  
  
  
  
  
，用两个div设置border-radius实现 
  
  
  
  
  
  
  
 ，border-dadius可以设置八个位置的弧度















。写法如： border-radius: 65px 21px 76px 14px / 90px 17px 111px 26px; //分别设置的是 左上 右上 右下 左下 / 左上 右上 右下 左下 的弧度 颜色设置个灰色渐变色 background-image: linear-gradient(to right, lightgrey, grey);

3. 绘制背带裤造型

先画个长方形div当身体

 


 


 


 


 


 


 


 ，背景色设置为黑色 
 
 
 
 
 
 
 
，背带我懒得画了 
   
   
   
   
   
   
   
 ，直接写个大写Y代替背带了（没想到效果还不错）； 然后绘制胳膊和腿
 

 

 

 

 

 

 

 ，由于考虑身体是主体
 

 

 

 

 

 

 

 
，所以头               ，四肢都相对于身体定位； 把所有元素都塞身体里 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 ，给个id为“kun
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 ”















，因为坤坤是唯一的！所以要用id选择器！ 利用position: absolute设置胳膊腿的位置                       ，然后用transform: rotate()对四肢进行选择调节姿势 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，在这之前要用transform-origin: center top;设置好四肢的旋转基点  
  
  
  
  
  
  
  。 胳膊的大小胳膊大胳膊用div























，小胳膊用这个div的:after伪元素实现 <div id="kun"> <div class="arms"> <div class="arm arm-l"></div> <div class="arm arm-r"></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); &-l{ left: 0; transform: rotate(50deg); border-radius: 0 0 30px 30px; &::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); } } &-r ... }

4. 实现铁山靠动作

精心打磨铁山靠的动作要领               ，采集每一帧的动画定格 由于每次变化都是不规则多边形 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  ，我考虑了三种实现方式 transform: skew() rotate() 用border实现 用clip-path实现 最后考虑方便调试















，以及可以实现更自由的图形 
  
  
  
  
  
  
  
，选择了用clip-path实现 由于身体用clip-path实现动画过程 
  
  
  
  
  
  
  
 ，占用的位置不会变化

 


 


 


 


 


 


 


 ，所以胳膊也不会跟着身体摆动 
 
 
 
 
 
 
 
，所以我得单独处理胳膊的动画 
   
   
   
   
   
   
   
 ，通过设置间距和位置体现跟着身体晃动的效果 
  
  
  
  
  
  
  
 。 //头动画 @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%); } }

5. 细节调整

粗略的实现后
 

 

 

 

 

 

 

 ，四肢的位置显然狠尴尬


 


 


 


 


 


 


 


。 打开控制台
 

 

 

 

 

 

 

 
，选中身体               ，用animation-play-state: paused;将身体分别暂停在不同的关键帧位置 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 ，然后慢慢微调四肢位置 设置背景

大功告成！！

6. 成果展示

全部代码和效果预览

免责声明!

我是真的ikun

背歌为证

迎面走来的你让我如此蠢蠢欲动*

这种感觉我从未有

Cause I got a crush on you who you

你是我的我是你的谁

再多一眼看一眼就会爆炸

再近一点靠近点快被融化

本文代码仅供娱乐















，不存在任何歧视                       ，不存在任何造谣污蔑 
 
 
 
 
 
 
 。如有冒犯 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，请私信我























，我会苏珊！