CSS3 过渡(transition)是一种在元素的属性值发生变化时,让这些变化以一种平滑的动画效果展示出来的技术。通过过渡,我们可以实现在鼠标悬停时元素颜色渐变、大小缩放等效果,让页面更加生动和吸引人。
语法
过渡的语法非常简单,只需要在元素的样式中添加 transition
属性即可。其基本语法如下:
-------- - ----------- -------- -------- --------------- ------ -
property
:指定要过渡的 CSS 属性名称,可以是all
表示所有属性。duration
:指定过渡效果持续的时间,单位为秒(s)或毫秒(ms)。timing-function
:指定过渡效果的时间函数,常用的有ease
(默认值)、linear
、ease-in
、ease-out
等。delay
:指定过渡效果延迟的时间,单位为秒(s)或毫秒(ms)。
示例
下面是一个简单的示例,当鼠标悬停在按钮上时,按钮的背景颜色将发生渐变效果:
--------- ----- ----- ---------- ------ ----- ---------------- ----- --------------- ---------------------------- ------------------- ----------- ---------- --------------- ------- ------- - -------- ---- ----- ----------------- -------- ------ ----- ----------- ---------------- ---- ----- - ------------- - ----------------- -------- - -------- ------- ------ ------- -------------------- ----------- ------- -------
在上面的示例中,当鼠标悬停在按钮上时,按钮的背景颜色将在 0.3 秒内以 ease
时间函数的方式发生渐变效果。
通过使用 CSS3 过渡,我们可以轻松实现各种动画效果,为网页增添更多交互性和视觉吸引力。