CSS3 transition实现超酷图片墙动画效果.docx

CSS3transition实现超酷图片墙动画效果
有了CSS3，实现效果就是这么简单。加群四一八加上三五五最后五三一了解更多web实战知识。

功能介绍web前端的技术学习(html,css,js)每天进步一小步，人生进步一大步！

工具/原料
电脑
坚持和耐心
方法/步骤
1
一、前面的感慨以前也陆陆续续试过CSS3的一些特性，文字投影，多边框等。但都是试试而已，知道有这么回事。今天，见到了一个新玩意，transition，认认真真的试了一下，经过，我懵了，我呆了，我傻了，半天说不出话来，这…这…unbelievable，amazing，太神奇了，太不可思议了，几行简单的CSS，如此炫酷的动画效果，flash都不及的动画效果，我真是难以表达我的心情。
下面由浅入深，使用纯CSS，一步一步实现图片墙动画效果。这里，必须要先说明一下：对于对于此transition效果，IE6,IE7,IE8浏览器可以回家过元旦节了，这里没有它们的事情，Firefox3虽然平时表现不错，这里也没有它的事情。这个效果最拿手的是chrome2浏览器，Safari4，也就是webkit家族，这里Firefox3.5勉强凑合，有盒阴影和旋转效果，但是没有动画。所以，下文陆续提供的demo页面仅适用于chrome浏览器和Safari浏览器，部分适用于Firefox3.5+，IE纯粹的观众。
2
二、基础练习–实现旋转与盒投影效果在CSS3中，实现旋转效果需要用到transform属性中的rotate属性；实现盒阴影效果需要使用box-shadow属性。具体参见下面的示例代码。
-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);transform:rotate(10deg);-webkit-box-shadow:2px2px3pxrgba(135,139,144,0.4);-moz-box-shadow:2px2px3pxrgba(135,139,144,0.4);box-shadow:2px2px3pxrgba(135,139,144,0.4);
上面代码部分，首先应该知道的是webkit表示webkit核心的浏览器，是其私有属性，作用于chrome和Safari浏览器，moz是Firefox浏览器的私有属性。transform中文意思转换，含有多个属性值，其中rotate表示旋转，其他一些属性如scale-尺寸放大缩小（本文将会用到），skew表示倾斜角度，translate表移动距离。例如，本例中，rotate(10deg)表示顺时针旋转10度，如果要逆时针旋转，使用负值就可以了。box-shadow表示盒阴影，其有四个参数，第一个参数表示水平偏移，例如2px表示投影右偏移2像素，第二个参数表示垂直偏移，2px表示投影向下偏移2像素，第三个参数表示模糊的大小，第四个参数为rgba颜色值，例如rgba(135,139,144,0.4)，括号内四个值分别指代r(red),g(green),b(blue),a(opacity)，这里表示透明度为40%的一种灰色。
上面代码在Safari浏览器下的表现如下：

3
三、使用transition给单个图片添加悬停动画有别于上面基础效果CSS代码，这里需要添加一个transition的样式，告诉浏览器，这里要有动画效果。先看一下此相关的CSS代码：
.pic{display:block;width:256px;margin:60px00;padding:10px10px15px;text-align:center;background:white;border:1pxsolid#bfbfbf;-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);transform:rotate(10deg);-webkit-box-shadow:2px2px3pxrgba(135,139,144,0.4);-moz-box-shadow:2px2px3pxrgba(135,139,144,0.4);box-shadow:2px2px3pxrgba(135,139,144,0.4);-webkit-transition:all0.5sease-in;}.pic:hover,.pic:focus,.pic:active{border-color:#9a9a9a;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);transform:rotate(0deg);}
代码部分最关键的就是：-webkit-transition:a