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