代码例子:
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
/* transition: 变化的属性 花费时间 运动路线 何时开始; */
transition: width,height 0.5s,0.5s ease ;
/* 第二中写法 */
transition: all .5s ease;
}
div:hover{
width: 400px;
height: 400px;
可以达到渐变效果
background-color: chartreuse;
}
</style>
</head>
<body>
<div></div>
</body>
运行结果:
把鼠标放上去的效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/265ac58966b54e76ac62dfe44d27997d.png