html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3过渡</title>
</head>
<body>
<div></div>
</body>
</html>
css样式代码:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
div{
margin: 10px auto;
width: 200px;
height: 100px;
background-color: red;
/* transition: width 0.5s,height,0.5s; 宽度和高度一起变化,注意中间用逗号隔开 */
/* transition: width 0.5s; 宽度这一个属性变化 */
/* transition: 变化的属性,花费的时间,运动轨迹,什么时候开始 */
transition: all 0.5s; /* all表示所有的hover里的属性变化 */
}
div:hover{
width: 300px;
height: 200px;
background-color: #00A4FF;
}