本篇文章给大家谈谈装饰网站模板源码分享，以及装修网站源码对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。
精品配饰活动banner
html5特效制作教程
案例做一个桃心煽动效果，效果如下2图所示（桃心右翼沿心形中心向前煽动）：
那么先来分析，整体布局
1首先后面粉色，应该是一张大的背景图
2桃心左右两边装饰，可以是版心分区图片或者背景图，这里使用的是img图片，大家使用背景图也是可以的
3中间桃心部分，由于要做动画，最好绝对定位，中间桃心部分，右翼需要做煽动效果，所以桃心部分应该一分为二，分为左右两个部分
那么先来搭建结构和书写基本样式
1结构（源码截图）：
源码：
<divclass=”all”><!–大背景盒子–>
<divclass=”banner”><!–版心盒子–>
<imgclass=”banner_l”src=”images/banner_l.png”width=”495″height=”568″alt=””/><!–左边装饰–>
<imgclass=”banner_r”src=”images/banner_r.png”width=”495″height=”568″alt=””/><!–右边装饰–>
<divclass=”banner_in”><!–桃心盒子，绝对定位–>
<imgsrc=”images/left.png”width=”495″height=”568″alt=””/><!–桃心左翼–>
<imgclass=”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-repeattopcenter;overflow:hidden;}/*大背景*/
.banner{width:1000px;height:600px;margin:100pxauto;position:relative;}/*版心盒子*/
.banner_l{float:left;}/*左边装饰*/
.banner_r{float:right;}/*右边装饰*/
.banner_in{width:990px;position:absolute;left:50%;top:0;margin-left:-495px;}/*桃心盒子*/
.banner_inimg{float:left;}/*桃心左右边翼图片浮动水平排列，严格对齐*/
</style>
基本结构样式书写完毕，现在来分析桃心右翼动画效果:
1首先我们要给运动的元素即桃心右翼添加动画，动画默认状态和结束状态应该一致
2桃心右翼向前煽动的效果，即右翼桃心沿Y轴旋转大约45度，那么可以利用css3里面的3d转换transform:rotateY(45deg);我们可以设置动画元素50%的状态为此状态
3这里需要注意css3transform转换模块，默认旋转的中心点是元素中心，桃心右翼旋转的中心点应该是元素的左边，那么我们需要添加一个css属性控制旋转的中心点transform-origin:left;
加动画代码：
1给动画元素加上类（源码截图）：
先给要做动画元素加上class=”ani”，再给ani书写animation
.banner_in.ani{
animation:swingease-in-outinfinite5s;
}
2给动画元素ani加动画（源码截图）：
此步骤设置动画默认和结束状态旋转角度不变，旋转中心点为元素左边，中间状态沿Y轴旋转45度，代码如下
@keyframesswing{
0%,100%{transform-origin:left;transform:rotateY(0deg);}
50%{transform-origin:left;transform:rotateY(45deg);}
}
最后一步,animation和transform属性，Chrome和Safari需加上浏览器私有前缀-webkit-,处理兼容问题。
源码:
.banner_in.ani{
animation:swingease-in-outinfinite5s;
-webkit-animation:swingease-in-outinfinite5s;
}
@keyframesswing{
0%,100%{transform-origin:left;transform:rotateY(0deg);}
50%{transform-origin:left;transform:rotateY(45deg);}
}
@-webkit-keyframesswing{
0%,100%{-webkit-transform-origin:left;-webkit-transform:rotateY(0deg);}
50%{-webkit-transform-origin:left;-webkit-transform:rotateY(45deg);}
}
案例所用到的图片文件和代码，请登录：
http://bbs.520it.com/forum.php?mod=viewthread&tid=1799
如果你还想了解更多这方面的信息，记得收藏关注本站。