css3 动画

2023-01-31 02:01:58 动画 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代码

  1. <a href="#"><img src="bj.jpeg" class="loGo"/></a> 
  2. a img.logo{  
  3. opacity:0.8;  
  4. -WEBit-transition:all 0.2s ease-out;  
  5. }  
  6. a:hover img.logo:{  
  7. opacity:1;  
  8. -moz-transfORM:scale(1.05) rotate(2deg);  
  9. -wekit-transform:scale(1.05) rotate(2deg);  

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

 
图3-29  CSS 3的动画效果

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

书籍:大巧不工:web前端设计修炼之道

相关文章