我正在参加 码上掘金体验活动，详情：show出你的创意代码块
前言
今天我给大家分享如何制作一个火柴人发射龟派气功，相信大家对龙珠比较熟悉了吧，龙珠定律对波左边胜，这次我就画在了左边，本人第一次写文章，不知道说啥，开始吧^_^、
代码
正文
1、画图
首先我们要先画出一个火柴人，头是一个原型，身体则是长方形拼接而成的，再加上地板线 ，html代码如下：
`
<div class="matchMan">
<div class="body matchBox">
<div class="matchBox head"></div>
<div class="matchBox leftHand">
<div class="matchBox leftHandSub">
<div class="gui"></div>
</div>
</div>
<div class="matchBox rightHand">
<div class="matchBox rightHandSub"></div>
</div>
<div class="matchBox leftLeg">
<div class="matchBox leftLegSub">
<div class="matchBox leftFoot"></div>
</div>
</div>
<div class="matchBox rightLeg">
<div class="matchBox rightLegSub">
<div class="matchBox rightFoot"></div>
</div>
</div>
</div>
<div class="ground">
<div class="groundSub"></div>
</div>
</div>
</div>`
2.调节样式
然后就是用css样式进行各个部位的调节，以及气功波的位置大小。部分代码如下
.ground {
display: none;
width: 600px;
height: 50px;
position: absolute;
top: 42px;
left: 273px;
background: -webkit-linear-gradient(top left, blue, yellow);
}
.groundSub {
width: 50px;
height: 50px;
position: absolute;
background: -webkit-linear-gradient(top left, #CFDC1F, yellow);
-webkit-animation: myGround 0.5s linear 0s infinite;
}
.head {
width: 50px;
height: 50px;
border-radius: 50%;
top: -49px;
left: -17px;
}
.body {
width: 10px;
height: 100px;
margin-left: 130px;
margin-top: 50px;
}
.leftHand {
width: 8px;
height: 50px;
transform-origin: 0px 0px;
transform: rotate(70deg);
}
.rightHand {
width: 8px;
height: 50px;
left: 4px;
transform-origin: 0px 0px;
transform: rotate(-45deg);
}
.leftHandSub {
width: 8px;
height: 50px;
top: 45px;
left: 0px;
transform-origin: 0px 0px;
transform: rotate(-20deg);
}
.rightHandSub {
width: 8px;
height: 50px;
top: 48px;
left: 0px;
transform-origin: 0px 0px;
transform: rotate(20deg);
}
.leftLeg {
width: 8px;
height: 70px;
background-color: red;
top: 95px;
transform-origin: 0px 0px;
transform: rotate(40deg);
}
.rightLeg {
width: 8px;
height: 70px;
background-color: red;
top: 99px;
transform-origin: 0px 0px;
transform: rotate(-40deg);
}
经过代码的样式调整，把初始的动作画出来了，乍看之下像我们ikun是不是，哈哈。效果如下：
3.写动画
接着我们开始写气动波，设置为长方形的，然后利用一个方块进行循环移动，就得到一个在动的气功波，部分代码如下
@keyframes myGround { 0% { left: 0px; } 50% { left: 200px; } 100% { left: 400px; } }
效果如下：
然后开始写各个部位的动画，就是将每个部位慢慢旋转，调整到它运动之后的位置，定义几个部分的动作，就像动作分解一样一步一步的执行，如下：
/*================action1=================*/
.action1.leftHand {
transition: all 1s;
transform: rotate(70deg);
}
.action1.leftHandSub {
transition: all 1s;
transform: rotate(-80deg);
}
.action1.rightHand {
transition: all 1s;
transform: rotate(-45deg);
}
.action1.rightHandSub {
transition: all 1s;
transform: rotate(70deg);
}
.action1.leftLeg {
transition: all 1s;
transform: rotate(40deg);
}
.action1.leftLegSub {
transition: all 1s;
transform: rotate(20deg);
}
.action1.rightLeg {
transition: all 1s;
transform: rotate(-90deg);
}
.action1.rightLegSub {
transition: all 1s;
transform: rotate(100deg);
}
/*================action2=================*/
.action2.leftHand {
transition: all 1s;
transform: rotate(-20deg);
}
.action2.leftHandSub {
transition: all 1s;
transform: rotate(-60deg);
}
.action2.rightHand {
transition: all 1s;
transform: rotate(-80deg);
}
.action2.rightHandSub {
transition: all 1s;
transform: rotate(7deg);
}
.action2.leftLeg {
transition: all 1s;
transform: rotate(40deg);
}
.action2.leftLegSub {
transition: all 1s;
transform: rotate(20deg);
}
.action2.rightLeg {
transition: all 1s;
transform: rotate(-90deg);
}
.action2.rightLegSub {
transition: all 1s;
transform: rotate(100deg);
}
.action2.gui {
top: 48px;
}
以上代码分别定义了每个部位要动的类前加了action类，即将要运动的轨迹，一开始是没有的，然后我们可以使用js代码为他们添加每个类让它动起来，顺便使用整个地板后移动，制造镜头效果，代码如下：
$(".ground").show(2000);
bigBoxMove();
function bigBoxMove() {
var moveX = "-400px";
$(".bigBox").animate({
left: moveX
}, 2000)
}
4.完成
到这里我们就完成了一个可以动的火柴人气功波：
结语
本人基于读者都了解html，css基本知识进行分享，利用了css 的动画进行操作目标的动作，可能我讲的不太好，还请多多包涵
