css3入门

CSS3中Transitions属性的使用方法

字号+ 作者: 来源: 2014-11-16 21:49 我要评论( )

在CSS 3中,Transitions功能通过将元素的某个属性从一个属性值在指定时间内平滑过渡到另一个属性值来实现动画功能。可通过transtions属性来使用Transtions功能。

Transitions属性图示

transtions属性的使用方法如下所示:

transtion:property duration timing-function

其中property表示属性进行平滑过渡,duraton表示在多长时间内完成属性值的平滑过渡,tinming-function表示通过什么方法来进行平滑过渡。

div { width:120px; height:90px; background:blue; transition:background-color 2s linear; }
div:hover { background:orange; }

上面的实例中,把div元素的蓝色背景在2秒钟之内平滑过渡到橙色背景。

当然还有另外一种使用Transitions功能的方法,就是将Transitions属性中的参数分开来写,例如下面的代码:

transtion-property:backgroud-color; transtion-duration:1s; tarnstion-timing-function:linear;

使用Transitions功能同时对于多个属性值进行平滑过渡:

div { height:90px; background:blue; width:120px; -moz-transition:background-color 1s linear,height 1s linear; }
div:hover { background:orange; height:240px; }

上面的实例中,元素从背景为蓝色、高度为120像素平滑过渡到背景为橙色,高度为240像素。

使用Transitions功能实现元素的移动与旋转动画:

img { position:absolute; top:270px; left:10px; -moz-transform:rotate(0deg); -moz-transition:left 5s linear,-moz-transform 1s linear; }
img:hover { left:230px; -moz-transform:rotate(15deg); }

上面的实例中,使定位图片元素从距左边距10像素、旋转角度为0状态平滑过渡到距左边距230像素、旋转15度。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • divcss入门视频教程-DIVCSS布局第6课-CSS滤镜的应用

    divcss入门视频教程-DIVCSS布局第6课-CSS滤镜的应用

    2015-09-30 11:41

  • divcss入门视频教程-DIVCSS布局第5课-用CSS制作漂亮的菜单

    divcss入门视频教程-DIVCSS布局第5课-用CSS制作漂亮的菜单

    2015-09-30 11:40

  • divcss入门教程-DIVCSS布局第4课-设置页面和浏览器的元素

    divcss入门教程-DIVCSS布局第4课-设置页面和浏览器的元素

    2015-09-30 11:40

  • divcss入门教程-DIVCSS布局第3课-设置表格与表单的样式

    divcss入门教程-DIVCSS布局第3课-设置表格与表单的样式

    2015-09-30 11:38

网友点评
<