我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛
介绍
马上就要过新年啦，原本我还不知道新的一年是什么年，到网上一查，原来新的一年是十二生肖中的-兔年。在这新春之际，掘金推出了兔了个兔-创意投稿大赛。上次参加掘金的活动，好像是几个月以前了，参加的是掘金的征文活动。参加完之后，工作上面有点忙，导致自己好久没有参加掘金的活动了。
现在掘金推出了兔了个兔-创意投稿大赛，现在自己的工作不是很忙，刚好有时间可以参加这个活动了。
该活动要求围绕“兔”这个元素展开创意，接下来马上就要开始创意了。
前言
在上一篇文章里兔年创意：4.摇动的灯笼里，我们介绍了怎么实现一个灯笼摇动的效果。
接下来，我们要实现一个新的效果：招手的的效果。
这是我在找兔子素材的时候，突然看到这个图片，就想着实现一下这个招手的效果。
实现
素材
在前面几篇文章，找兔子素材的时候，我发现了一个图片
看到这个图片，我就想实现一下兔子招手的效果。
代码
兔子素材找好了，接下来就要开始写代码了。
要实现的效果比较简单，我们就不要使用创建项目的方式来实现效果了，使用一个html文件来实现。
我们创建一个index.html文件，代码将在这个index.html文件里完成。
我们先写html结构
<body>
<div>
<img class="rabbit" src="./image/rabbit.png" alt="" />
<img class="left" src="./image/leftHand.png" alt="" />
<img class="right" src="./image/rightHand.png" alt="" />
</div>
</body>
原本整张图片都是整体的，这里要实现兔子招手的效果的话，需要处理一下兔子的两只手。
这里我是使用photoshop把两只手给扣出来了。然后在body里，我写了两个img标签，一个是用来显示兔子的左手，另外一个是用来显示兔子的右手。
把图片都引进来后，手的位置，其实是不正确的，因为我用ps把手给扣出来了。
接下来，我们通过css样式，调整一下手的位置。
div {
background-color: #f6f6f6;
}
.rabbit {
position: relative;
z-index: 2;
}
.left {
position: absolute;
top: 142px;
left: 138px;
transform-origin: 90px 130px;
animation: leftRotate 2s infinite;
}
.right {
position: absolute;
top: 163px;
left: 279px;
transform-origin: 0px 130px;
animation: righRotate 2s 1s infinite;
}nimation: rotate 2s infinite ease-in-out;
}
接着到浏览器查看一下效果
现在页面已经看到手的位置是正确的了，但是还是静态的。现在就要让手挥动起来，怎么动起来呢？
这里，我是使用css的animation，来做动画的。定义一个keyframes，然后赋值给animation属性。
@keyframes leftRotate {
0% {
transform: rotate(10deg);
}
50% {
transform: rotate(-5deg);
}
100% {
transform: rotate(10deg);
}
}
@keyframes righRotate {
0% {
transform: rotate(4deg);
}
50% {
transform: rotate(-3deg);
}
100% {
transform: rotate(4deg);
}
}
我是利用css的transform属性，来做手的招手动画的。为了让左右手有一定的区分，我设置的旋转角度是不一样的。
运行index.html文件到浏览器，我们发现手转动起来了，有一个招手的效果。
小结
本小节，主要是讲解了怎么实现兔子招手效果。主要是使用了css的animation属性来做动画的，来实现手的摇晃效果。整个过程还是挺简单的，大家可以实现一下。
最后，兔年来到，福兔祝你鸿福齐天，万事如意！
