过渡的基本应用
首先熟悉一下它的各种属性
- 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