css3过度效果属性 |css提取网页图片

/*过渡效果的基本语法*/
transition: property duration timing-function delay;

在上面的语法中：

• property：指定要应用过渡效果的 CSS 属性。比如：color、background-color 等。
• duration：指定过渡的时间长度（单位为秒或毫秒）。
• timing-function：指定过渡效果的时间函数，它控制着过渡的速度变化。
• delay：指定过渡效果开始执行的延迟时间。

/*实现简单的过渡效果的例子*/
a {
color: #333;
transition: color 0.3s ease-in-out;
}
a:hover {
color: #f00;
}

上面的代码让超链接文本颜色在鼠标悬停时过渡到红色，过渡时间为 0.3 秒，过渡速度为先慢后快后慢。

/*实现复杂的过渡效果的例子*/
div {
width: 100px;
height: 100px;
background-color: #333;
transition: width 1s cubic-bezier(0, 0.8, 0.2, 1) 0.5s, background-color 2s ease-out 1s;
}
div:hover {
width: 200px;
background-color: #f00;
}

上面的代码让 div 元素在鼠标悬停时，宽度从 100px 过渡到 200px，过渡时间为 1 秒，过渡速度按照三次贝塞尔曲线变化，延迟 0.5 秒开始执行。同时，背景颜色由 #333 过渡到 #f00，过渡时间为 2 秒，过渡速度为先快后慢，延迟 1 秒开始执行。

总之，CSS3 过渡效果属性为大家提供了丰富的动画表现手段，可以让大家的页面更加有趣和生动。