大致介绍
下午看到了一个送圣诞礼物的小动画，正好要快到圣诞节了，就动手模仿并改进了一些小问题
原地址：jQuery实现花式轮播之圣诞节礼物传送效果
思路：动画中一共有五个礼物，他们平均分布在屏幕中，设置最外边的两个礼物旋转一定的角度并隐藏，动画开始，每个礼物向右移动一定的位置，然后再把第五个礼物添加到第一个礼物之前，这样这五个礼物就重新排列了，在写jQ时只管礼物位置的变化就行了，因为礼物的旋转和隐藏在样式中都已经设置好了，某个礼物如果成为第一个礼物就会自动隐藏旋转
如果对其中的方法不熟悉的可以参考我写的jQuery学习之路，里面有讲解
基本结构
代码：
<div class="cr">
<div class="cr-l"><img src="img/fatherCh.png" alt=""/></div>
<div class="cr-icon">
<div id="cr-icon">
<img style="left:5%" src="img/gift2.png" alt=""/>
<img style="left:25%" src="img/gift2.png" alt=""/>
<img style="left:45%" src="img/gift2.png" alt=""/>
<img style="left:65%" src="img/gift2.png" alt=""/>
<img style="left:85%" src="img/gift2.png" alt=""/>
</div>
</div>
<div class="cr-r"><img src="img/family.png" alt=""/></div>
</div>样式
在css中用到了:first 和 :last 属性，这两个属性是动态的，如果文档的结构变了，这两个属性的值也会相应的改变，这样我们就不必再麻烦的判断哪个元素是最后一个元素（第一个元素），直接用这两个属性就会自动选择第一个元素和最后一个元素
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.cr{
width: 100%;
position: relative;
background: url("../img/bg.png") no-repeat 0 0;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
overflow: hidden;
}
.cr-l,.cr-r{
position: absolute;
bottom:10%;
width: 20.8%;
height: 70%;
z-index:100;
}
.cr-l img,.cr-r img{
width: 100%;
position: absolute;
top:50%;
}
.cr-l{
left: 0;
}
.cr-r{
right:0;
}
.cr-icon{
bottom: 15%;
left:0;
position: absolute;
z-index: 1000;
width: 100%;
height: 70%;
text-align: center;
}
.cr-icon img{
margin-right: 25px;
width: 10%;
vertical-align: top;
position: absolute;
bottom: 0;
opacity: 1;
transform:rotate(0deg);
