本文深入讲解CSS过渡属性的使用，包括transition-property、transition-duration、transition-timing-function和transition-delay的具体功能与实例演示，通过代码展示如何平滑改变元素宽度。
过渡的基本应用
首先熟悉一下它的各种属性
- transition-property ： 检索或设置对象中的参与过渡的属性
- transition-duration ： 检索或设置对象过渡的持续时间
- transition-timing-function ： 检索或设置对象中过渡的动画类型
- transition-delay ： 检索或设置对象延迟过渡的时间
说明
- 检索或设置对象中的参与过渡的属性。
- 默认值为：all。默认为所有可以进行过渡的css属性。
- 如果提供多个属性值，以逗号进行分隔。
有过渡效果的属性非常多
例如：width,height,bottom,color,background-color…
下方插入代码来举例
<style>
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
</body>
运行
鼠标放上去width变长，从100到300
扫一扫
4282
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
