网络编程
位置:首页>> 网络编程>> 网页设计>> 你需要知道的CSS3 动画技术[译](3)

你需要知道的CSS3 动画技术[译](3)

作者:神采飞扬 来源:前端观察 发布时间:2009-12-30 17:02:00 

标签:CSS3,动画,设计师

scale

scale并不像你想象的那样工作:简单的缩小和放大一个元素。缩放功能同时采用宽和高两个值,这些值可以是正数、负数和小数。

正数值放大一个元素,正如你期望的那样,基于指定的宽度和高度。

负数值并不会缩小元素,而是翻转它(比如,文字被反转)然后相应的缩放它。然而,你可以使用小于1的小数(例如.5)来收缩或者缩小一个元素。

#nav { /* nav元素的宽和高都会被放大双倍 */ -webkit-transform: scale(2); -moz-transform: scale(2); -o-transform: scale(2); }#nav { /* nav元素的宽会是双倍,而高度保持不变 */ -webkit-transform: scale(2, 1); -moz-transform: scale(2, 1); -o-transform: scale(2, 1); }#nav { /* nav的宽度将是双倍,并且水平翻转,但是高度保持不变 */ -webkit-transform: scale(-2, 1); -moz-transform: scale(-2, 1); -o-transform: scale(-2, 1); }

浏览器支持

scale属性目前只有Firefox, Safari/Chrome以及 opera 10.50支持,到目前为止没有一个IE版本支持。缩放一个对象是相当有意义的设计选择。它可以通过渐进增强来使用:hover,这可以在你的导航上添加一个小小的趣味。

#nav li a:hover{
 /* 这可以让你的导航链接在鼠标经过的时候轻微的放大 */ 
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1); 
 -o-transform: scale(1.1); 
 }

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com