css3 动画

3.5.4  动画

有人将HTML 5和CSS 3比做Flash的杀手，这是有原因的。因为除了HTML 5能够实现矢量图形制作外，使用CSS 3还可以对图像进行更细致的操作，它新增了动画功能，要实现图像的变形等功能，只需要一行CSS就可以实现了。那么结合HTML 5和JavaScript就可以将动画做得更美，效果完全可以接近Flash。但要想实现Flash的那种效果，还是需要下一定工夫的，但新增的动画功能 已经足够让人兴奋了。通过下面这个例子，读者可以试验一下利用简单的CSS 3特性完成鼠标悬停时的动画效果，见代码清单3-19。

代码清单3-19  CSS 3动画效果HTML代码

<a href="#"><img class="lazy" data-src="bj.jpeg" class="logo"/></a> 
a img.logo{  
opacity：0.8;  
-webit-transition：all 0.2s ease-out;  
}  
a:hover img.logo：{  
opacity：1;  
-moz-transform：scale(1.05) rotate(2deg);  
-wekit-transform：scale(1.05) rotate(2deg);  
} 

在这个例子中，对以类名为“logo”的图像增加鼠标悬停样式，并设置变形属性，针对不同浏览器需要加上前缀。这里有两个参数：Scale是一个缩 放功能，可以让任一元素变得更大，它使用正数、负数以及小数作为参数；Rotate(旋转)允许你通过传递一个度数值来转动一个对象。我们可以通过图 3-29进行对比，或者亲手试验一下。

图3-29  CSS 3的动画效果

通过CSS 3中动画特征的高级用法，还可以创建移动、放大、缩小、矩阵变形等一系列动画效果。目前支持的浏览器不多，最新的Safari、Chrome、Firefox对其大部分功能都可以支持，但都必须使用内核前缀。

书籍：大巧不工：Web前端设计修炼之道