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