如何使用 CSS 中的过渡(transition)属性来定义元素在网页中的过渡效果
CSS的transition
属性可以用来定义元素的过渡效果,使得当元素的CSS属性改变时,这个改变可以用一个平滑的动画效果进行。
基本语法如下:
transition: property duration timing-function delay;
property
:定义过渡效果的CSS属性名,比如width
、background-color
、opacity
等。如果想要所有属性都有过渡效果,可以使用all
关键字。duration
:定义过渡效果的持续时间,单位通常是秒(s)或毫秒(ms)。timing-function
:定义过渡的时序函数,比如linear
、ease
、ease-in
、ease-out
、ease-in-out
、cubic-bezier
。delay
:定义过渡效果开始前的延迟时间。
例子:
div {
transition: background-color 1s ease-in-out 0.5s;
}
div:hover {
background-color: yellow;
}
在这个例子中,当鼠标悬停在div
上时,背景色会在0.5秒后以ease-in-out
时序函数在1秒内渐变到黄色。
评论已关闭