html5 特效 banner,精品配饰活动banner html5特效制作教程

精品配饰活动banner

html5特效制作教程

案例做一个桃心煽动效果，效果如下2图所示(桃心右翼沿心形中心向前煽动)：

1470626927336164.png

1470626939633599.png

那么先来分析，整体布局

1 首先后面粉色，应该是一张大的背景图

2 桃心左右两边装饰，可以是版心分区图片或者背景图，这里使用的是img图片，大家使用背景图也是可以的

3 中间桃心部分，由于要做动画，最好绝对定位，中间桃心部分，右翼需要做煽动效果，所以桃心部分应该一分为二，分为左右两个部分

那么先来搭建结构和书写基本样式

1 结构(源码截图)：

1470626982107471.png

源码：

2 对应样式(源码截图)：

1470627000471886.png

源码：

{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;}/桃心左右边翼图片浮动水平排列，严格对齐*/

基本结构样式书写完毕，现在来分析桃心右翼动画效果:

1 首先我们要给运动的元素即桃心右翼添加动画，动画默认状态和结束状态应该一致

2 桃心右翼向前煽动的效果，即右翼桃心沿Y轴旋转大约45度，那么可以利用css3里面的3d转换transform:rotateY(45deg); 我们可以设置动画元素50%的状态为此状态

3 这里需要注意css3 transform转换模块，默认旋转的中心点是元素中心，桃心右翼旋转的中心点应该是元素的左边，那么我们需要添加一个css属性控制旋转的中心点transform-origin:left;

加动画代码：

1 给动画元素加上类(源码截图)：

1470627183657525.png

先给要做动画元素加上class="ani"，再给ani书写animation

.banner_in .ani{

animation:swing ease-in-out infinite 5s;

}

2 给动画元素ani加动画(源码截图)：

1470627204233705.png

此步骤设置动画默认和结束状态旋转角度不变，旋转中心点为元素左边，中间状态沿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:附件为案例所用到的图片文件和代码

banner素材和代码文件.zip