我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛
介绍
马上就要过新年啦，原本我还不知道新的一年是什么年，到网上一查，原来新的一年是十二生肖中的-兔年。在这新春之际，掘金推出了兔了个兔-创意投稿大赛。上次参加掘金的活动，好像是几个月以前了，参加的是掘金的征文活动。参加完之后，工作上面有点忙，导致自己好久没有参加掘金的活动了。
现在掘金推出了兔了个兔-创意投稿大赛，现在自己的工作不是很忙，刚好有时间可以参加这个活动了。
该活动要求围绕“兔”这个元素展开创意，接下来马上就要开始创意了。
前言
在上一篇文章里兔年创意：5.招手的兔子里，我们介绍了怎么实现兔子招手的效果。
接下来，我们要实现另外一个效果：摇耳朵的的效果。
这是我在找兔子素材的时候，突然看到这个图片，觉得实现一下兔子摇耳朵的效果挺好的，就想着实现一下这个效果。
实现
素材
在前面几篇文章，找兔子素材的时候，我发现了这一个图片
看到这个图片，我就想实现一下兔子摇耳朵的效果。
代码
兔子素材找好了，接下来就要开始写代码了。
要实现的效果比较简单，我们就不要使用创建项目的方式来实现效果了，使用一个html文件来实现。
我们创建一个index.html文件，代码将在这个index.html文件里完成。
我们先写html结构
<body>
<div>
<img class="rabbit" src="./image/rabbit.png" alt="" />
<img class="left" src="./image/leftEar.png" alt="" />
<img class="right" src="./image/rightEar.png" alt="" />
</div>
</body>
原本这张图片都是整体的，这里想要实现兔子摇耳朵效果的话，需要处理一下兔子的两只耳朵。
这里我是使用photoshop把两只耳朵给扣出来了。然后在body里面，我写了两个img标签，一个是用来显示兔子的左耳朵，另外一个是用来显示兔子的右耳朵。
把图片都引进来后，两只耳朵的位置，其实是不正确的，这是因为我用ps把耳朵给扣出来了。
接下来，我们通过css样式，调整一下耳朵的位置。
div {
background-color: #f6f6f6;
}
.rabbit {
position: relative;
z-index: 2;
}
.left {
position: absolute;
top: 127px;
left: 9px;
transform-origin: 244px 130px;
animation: leftRotate 2s infinite;
}
.right {
position: absolute;
top: 15px;
left: 241px;
transform-origin: 172px 190px;
animation: righRotate 2s 1s infinite;
}
接着到浏览器查看一下效果，现在页面已经看到耳朵的位置是正确的了，但是还是静态的。现在就要让耳朵摇动起来，怎么动起来呢？
这里，我是使用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属性来来实现耳朵的摇动效果的。整个过程还是挺简单的，大家可以自己实现一下。
最后，兔年来到，福兔祝你鸿福齐天，万事如意！
