我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛
介绍
马上就要过新年啦，原本我还不知道新的一年是什么年，到网上一查，原来新的一年是十二生肖中的-兔年。在这新春之际，掘金推出了兔了个兔-创意投稿大赛。上次参加掘金的活动，好像是几个月以前了，参加的是掘金的征文活动。参加完之后，工作上面有点忙，导致自己好久没有参加掘金的活动了。
现在掘金推出了兔了个兔-创意投稿大赛，现在自己的工作不是很忙，刚好有时间可以参加这个活动了。
该活动要求围绕“兔”这个元素展开创意，接下来马上就要开始创意了。
前言
在上一篇文章里兔年创意：2.兔子重影里，我们介绍了怎么实现兔子跟着鼠标移动时，有拖尾效果。
近来在支付宝集福活动中，在集福过程中，我发现中间有个loading效果挺好的：那个福字一直在哪里转着。
接下来，我们就实现一下这个loading效果
实现
素材
原本支付宝的集福活动，loading中间是一个福字，现在我打算把它改成一个兔子。因为今年刚好是兔年。
为了找这个兔子，我也是找了好多网站，最终不得不捡起自己失传多年的photoshop技能，找到了一些素材，自己制作了一个loading图，就是这个图
代码
兔子素材找好了，接下来就要开始写代码了。
要实现的效果比较简单，我们就不要使用创建项目的方式来实现效果了，使用一个html文件来实现。
我们创建一个index.html文件，代码将在这个index.html文件里完成。
我们先写html结构
<body>
<img class="bg" src="./image/bg1.jpg" alt="" />
<div class="mask center">
<div class="out-wrap center">
<img class="rabbit" src="./image/rabbit.png" alt="" />
</div>
</div>
</body>
这里，只是做一个loading效果，所以html结构写的比较简单。有一个背景图片，再加上一个遮罩层，中间显示loading。
html结构写好了，接下来我们就要写css样式了
* {
margin: 0;
padding: 0;
}
.bg {
width: 100%;
height: 100%;
}
.mask {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.65);
position: absolute;
top: 0;
}
.out-wrap {
width: 150px;
height: 100px;
background-color: #e8351e;
border-radius: 15px;
}
.center {
display: flex;
justify-content: center;
align-items: center;
}
接着到浏览器查看一下效果
现在页面已经看到了，但是还是静态的。现在就要让loading动起来，怎么动起来呢？
这里，我是使用css的animation，来做动画的。
.rabbit {
animation: rotation 3s ease-in-out infinite;
}
@keyframes rotation {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
利用css的transform属性，来做兔子的转动动画。
运行index.html文件到浏览器，我们发现兔子转动起来了。
小结
本小节，主要讲解了怎么实现类似支付宝集福活动中的loading效果，使用了css的transform加上animation属性，来实现loading的转动效果。整个过程还是挺简单的，大家可以实现一下。
最后，兔年来到，福兔祝你鸿福齐天，万事如意！
