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 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前端设计修炼之道
相关文章