职业IT人-IT人生活圈

 找回密码
 成为会员
搜索
查看: 500|回复: 11

还在用JS写动画?那你就奥特了~~纯CSS实现元素旋转加放大

  [复制链接]
芷馨 发表于 2011-6-15 14:59 | 显示全部楼层 |阅读模式

本文目前仅适用于 Chrome、Opera、Safari。

原文与demo: http://www.jsmix.com/css/approach-to-css3-animation.html

效果: 鼠标移动到一个元素上,元素在2秒内旋转720度,并以原尺寸的1.5倍进行放大

要实现这个效果只需要非常简单的3个步骤,首先就是创建你需要旋转的元素。

Html代码  
<div id="css_animation">CSS 3</div>  

<div id="css_animation">CSS 3</div>

接下来我们需要告诉浏览器刚才添加的元素需要运用它的一个属性去执行某种动画,设置动画执行的时间以及运动的函数。这里会用到 CSS 3 的新属性:transition。不用担心下面的代码会让你一头雾水,紧接着会有对 transition 属性详细的讲解。

Css代码  
#css_animation{   
    width: 100px;   
    height: 100px;   
    background: purple;   
    -webkit-transition: all 2s ease-in-out;   
    -moz-transition: all 2s ease-in-out;   
    -o-transition: all 2s ease-in-out;   
    transition: all 2s ease-in-out;   
}  

#css_animation{
    width: 100px;
    height: 100px;
    background: purple;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
}


width、height、background 不用再做任何介绍了,transition 的各种前缀是为了兼容不同浏览器的私有属性这一点相信对 CSS 3 稍有了解的人都也应该知道了。这里值得注意的是,到目前为止,Firefox 的最新版本 (3.6) 依然没有提供对 transition 的支持,但 Mozilla 声称将会在 Gecko 1.9.3 (firefox 4) 中引入这一属性,所以为了增强代码的延续性,我们依然添加了 -moz 的私有属性。

上面的 transition 是一个简写,第一个属性值 all 实际上是 transition-property 的属性值,他表示你讲告诉浏览器你会对哪个属性进行动画的操作。比如 transition-property : left , transition-property : opacity,width ,前者表示将要对属性 left 执行动画,后者表示会同时对 opacity 和 width 属性执行动画,是的,多个属性之间用半角逗号隔开。而这里设置的 all 则表示可能会对任何一个属性进行操作,这又是一个偷懒的方式。

第二个属性值 2s 就很简单了,它表示动画执行的时间,即元素从旧的属性转换到新的属性消耗的秒数。如果这个值为 0 则表示动画在执行时立即结束。该属性值的单位可以为 s (秒),也可以为 ms (毫秒)。当然,上面的代码同样对其使用了简写,完整的写法是 transition-duration : 2s; 默认值为0。

第三个属性值 ease-in-out,可以简单地理解为在动画执行中使用" ease-in-out "这种效果,这实际上将决定元素在动画过程中运用的何种函数来进行运动的计算,这通常被称作缓动函数。大致上有 "ease | linear | ease-in | ease-out | ease-in-out" 这么几种预定值。默认值为 "ease "。这个属性的完整写法是 transition-timing-function : ease-in-out;

在我们的 demo 中就是用了这3个属性,事实上,transition 还有一个属性值:transition-delay ,它的属性值跟 transition-duration 完全一样,唯一不同的是,它表示动画的延时时间,这很好理解,根据指定时间延迟动画的执行。

在进行最后一个步骤之前,有必要重申一下的是,transition 属性只是对上面提到的四个 transition-X 属性的简写,它的简写规则是: [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’>] 。这一点千万不要搞混淆。另外,如果你想了解更多关于 transition 的内容 W3C 提供了非常详尽的文档。

正如你所看到 demo 中的那样,最后一个步骤我们需要给元素加上 hover 样式。这里用到的是 transform 属性。

Css代码  
#css_animation:hover {   
    -webkit-transform: rotate(720deg) scale(1.5);   
    -moz-transform: rotate(720deg) scale(1.5);   
    -o-transform: rotate(720deg) scale(1.5);   
    transform: rotate(720deg) scale(1.5);   
}  

#css_animation:hover {
    -webkit-transform: rotate(720deg) scale(1.5);
    -moz-transform: rotate(720deg) scale(1.5);
    -o-transform: rotate(720deg) scale(1.5);
    transform: rotate(720deg) scale(1.5);
}


相比 transition 属性,transform 要容易理解一些,他表示对元素进行变形。rotate(720deg)表示对元素进行720度的旋转变形,括号里的数字为旋转的角度值,单位 deg ,scale 是一个对元素进行缩放的功能,括号里的参数表示缩放的倍数,无需单位。事实上 transform 远比这里讲到的要强大得多,可以实现各种不同的变形,在W3C的文档中有非常详细的介绍。

到目前为止,你应该已经实现了如同上面 demo 中的效果。其实整个过程可以暂时这样理解:通过 transition ,我们对元素进行了 mouseover 事件监听,并记录下了它最初的所有(all)属性的值,当元素的 mouseover 事件被触发的时候,找到元素的目标属性的值,然后执行动画。就是这么简单。另外值得一提的是,当元素处于动画状态时,如果元素中包含文字,此时文字依然是可选的,这是 SVG 和 Canvas 所无法达到的效果。
真的很希望像国外网站一样,通过局部差异化的开发,逐步过渡到css3,也让用户过渡到firefox、chrome等先进的浏览器。




能文能武 发表于 2011-6-15 15:00 | 显示全部楼层
天啊, 我连JS动画都还没学会, 刚才才学一点点, 就奥特了...

 楼主| 芷馨 发表于 2011-6-15 15:00 | 显示全部楼层
在中国,放弃ie6就差不多放弃了一大半的用户,悲哀,所以继续js写动画

木已 发表于 2011-6-15 15:00 | 显示全部楼层
挺不错的,QQ空间用了这个!
楼主“局部差异化”来进行过渡的想法和我不谋而合,在不影响老浏览器使用的情况下,让支持新特性的浏览器可以展现更好的效果、带来更好的体验。

紫衿 发表于 2011-6-15 15:00 | 显示全部楼层
为什么我学什么都 是out的。

明天我自创个东西。

叫我小乖 发表于 2011-6-15 15:00 | 显示全部楼层
中国电信去把微软收购了吧

走失的猫咪 发表于 2011-6-15 15:00 | 显示全部楼层
html5+css3 +javascript 不知道会发生什么变化!!

秋秋 发表于 2011-6-15 15:01 | 显示全部楼层
看来吾已经out多年

北大青鸟 发表于 2011-6-15 15:01 | 显示全部楼层
普及Win7,ie6就死定了.这样最起码有个css2能用.
css3、html5在中国就像一个梦一样,现在还摸不到呢。

能文能武 发表于 2011-6-15 15:01 | 显示全部楼层
好久没有去过网吧了..不知道里面是不是全是ie6。。。



紫衿 发表于 2011-8-5 11:43 | 显示全部楼层
本人姓:常...名:有理..
楠楠 发表于 2011-8-12 10:10 | 显示全部楼层
貌似我真的很笨????哎  
您需要登录后才可以回帖 登录 | 成为会员

本版积分规则

QQ|手机版|小黑屋|网站帮助|职业IT人-IT人生活圈 ( 粤ICP备12053935号-1 )|网站地图
本站文章版权归原发布者及原出处所有。内容为作者个人观点,并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是信息平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽造成漏登,请及时联系我们,我们将根据著作权人的要求立即更正或者删除有关内容。

GMT+8, 2024-3-29 17:43 , Processed in 0.166968 second(s), 20 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表