精品配饰活动banner
html5特效制作教程
案例做一个桃心煽动效果，效果如下2图所示（桃心右翼沿心形中心向前煽动）：
那么先来分析，整体布局
1 首先后面粉色，应该是一张大的背景图
2 桃心左右两边装饰，可以是版心分区图片或者背景图，这里使用的是img图片，大家使用背景图也是可以的
3 中间桃心部分，由于要做动画，最好绝对定位，中间桃心部分，右翼需要做煽动效果，所以桃心部分应该一分为二，分为左右两个部分
那么先来搭建结构和书写基本样式
1 结构（源码截图）：
源码：
<div class="all">
<div class="banner">
<img class="banner_l" src="images/banner_l.png" width="495" height="568" alt=""/>
<img class="banner_r" src="images/banner_r.png" width="495" height="568" alt=""/>
<div class="banner_in">
<img src="images/left.png" width="495" height="568" alt=""/>
<img class="ani" src="images/right.png" width="495" height="568" alt=""/>
</div>
</div>
</div>
2 对应样式（源码截图）：
源码：
<style>
{padding: 0; margin: 0; list-style: none;}
.all{ height:1000px; background:url(images/bg.jpg) no-repeat top center; overflow:hidden;}/大背景/
.banner{width:1000px; height:600px; margin:100px auto; position:relative;}/版心盒子/
.banner_l{ float: left;}/左边装饰/
.banner_r{ float: right;}/右边装饰/
.banner_in{width:990px; position:absolute; left:50%; top:0; margin-left:-495px;}/桃心盒子/
.banner_in img{ float:left;}/桃心左右边翼图片浮动水平排列，严格对齐*/
</style>
基本结构样式书写完毕，现在来分析桃心右翼动画效果:
1 首先我们要给运动的元素即桃心右翼添加动画，动画默认状态和结束状态应该一致
2 桃心右翼向前煽动的效果，即右翼桃心沿Y轴旋转大约45度，那么可以利用css3里面的3d转换transform:rotateY(45deg); 我们可以设置动画元素50%的状态为此状态
3 这里需要注意css3 transform转换模块，默认旋转的中心点是元素中心，桃心右翼旋转的中心点应该是元素的左边，那么我们需要添加一个css属性控制旋转的中心点transform-origin:left;
加动画代码：
1 给动画元素加上类（源码截图）：
先给要做动画元素加上class="ani"，再给ani书写animation
.banner_in .ani{
animation:swing ease-in-out infinite 5s;
}
2 给动画元素ani加动画（源码截图）：
此步骤设置动画默认和结束状态旋转角度不变，旋转中心点为元素左边，中间状态沿Y轴旋转45度，代码如下
@keyframes swing{
0%,100%{transform-origin:left; transform:rotateY(0deg);}
50%{transform-origin:left; transform:rotateY(45deg);}
}
最后一步,animation和transform属性，Chrome 和 Safari需加上浏览器私有前缀-webkit-,处理兼容问题。
源码:
.banner_in .ani{
animation:swing ease-in-out infinite 5s;
-webkit-animation:swing ease-in-out infinite 5s;
}
@keyframes swing{
0%,100%{transform-origin:left; transform:rotateY(0deg);}
50%{transform-origin:left; transform:rotateY(45deg);}
}
@-webkit-keyframes swing{
0%,100%{-webkit-transform-origin:left; -webkit-transform:rotateY(0deg);}
50%{-webkit-transform-origin:left; -webkit-transform:rotateY(45deg);}
}
ps:附件为案例所用到的图片文件和代码
