码迷,mamicode.com
首页 > Web开发 > 详细

CSS3 过渡

时间:2017-06-22 21:56:58      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:添加   ref   comm   script   情况   使用   动画   tran   鼠标指针   

通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。

注释:Chrome 25 以及更早的版本,需要前缀 -webkit-。

它如何工作?

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点,必须规定两项内容:

  • 规定您希望把效果添加到哪个 CSS 属性上
  • 规定效果的时长

实例

应用于宽度属性的过渡效果,时长为 2 秒:

div
{
transition: width 2s;
-moz-transition: width 2s;	/* Firefox 4 */
-webkit-transition: width 2s;	/* Safari 和 Chrome */
-o-transition: width 2s;	/* Opera */
}

注释:如果时长未规定,则不会有过渡效果,因为默认值是 0。

效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时:

实例

规定当鼠标指针悬浮于 <div> 元素上时:

div:hover
{
width:300px;
}

CSS3 过渡

标签:添加   ref   comm   script   情况   使用   动画   tran   鼠标指针   

原文地址:http://www.cnblogs.com/z1h2/p/7067216.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!