IT兄弟连 HTML5教程 CSS3属性特效 transition过渡

时间:2020-12-10 17:33:34

IT兄弟连 HTML5教程 CSS3属性特效 transition过渡

CSS3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。

transition属性是一个简写属性,用于设置四个过渡属性,这四个过渡属性的描述如表1-21:

表1-21  transition过渡属性及描述

IT兄弟连 HTML5教程 CSS3属性特效 transition过渡

transition最简单的用法

下面,我们为一个div设置初始宽度为200px,背景颜色为“red”色并增加“transition: 2s”。当鼠标移入到这个div后,div经过2s后宽度增加到400px,背景颜色变成“pink”色。2s的过渡时间,我们可以见证div的整体变化,代码如下:

IT兄弟连 HTML5教程 CSS3属性特效 transition过渡

将这段代码运行到浏览器中,我们可以一览div的过渡效果。图7-62是笔者为div过渡初期、中期和后期随机截取的三张图,以供读者参考:

IT兄弟连 HTML5教程 CSS3属性特效 transition过渡

另外,transition还可以指定需要过渡的属性,如我们只需要过渡上例div的宽度属性时,只需要将transition属性的值设为“2s width”。这是,当我们将鼠标移入到这个元素时,div背景颜色立马变为了“pink”色,而宽度变化是有过渡的。

我们还可以设置transition的运动样式、延迟时间及运动形式,读者感兴趣可以一一尝试设置运行。