大阳城·(中国区)官方网站入口-Macau App Station

使用transition-property属性改变元素背景色

在上面案例中，通过transition-property属性指定产生过渡效果的CSS属性为background-color，并设置了鼠标移上时背景颜色变为蓝色，如第14～15行代码所示。另外，为了解决各类浏览器的兼容性问题，分别添加了-webkit-、-moz-、-o-等不同的浏览器前缀兼容代码。

运行案例代码，默认效果如下图所示。

transition-property

当鼠标指针悬浮到网页中的

区域时，背景色立刻由红色变为蓝色，如图所示，而不会产生过渡。这是因为在设置“过渡”效果时，必须使用transition-duration属性设置过渡时间，否则不会产生过渡效果。

ransition-duration属性用于定义过渡效果花费的时间，默认值为0，常用单位是秒（s）或者毫秒（ms），其基本语法格式如下。

transition-duration: time;

通过transition-duration属性，添加3秒中的延时。

添加延时后的效果：

猜你喜欢

什么是事件冒泡？如何阻止事件冒泡？

最新资讯