transition的使用需要和 hover 搭配使用
transition:属性 持续的时间(s) ease-in/ease(曲线规律) 多少秒后开始(s)
transition:all 持续时间(s) // 简易写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: pink;
position: relative;
top: 100px;
margin: 0 auto;
transition: width 0.5s ease-in,
border-radius 0.5s ease-in,
height 0.5s ease-in;
}
div:hover {
width: 400px;
height: 400px;
border-radius: 50%
}
input {
position: fixed;
top: 50px;
left:50%;
margin-left: -50px;
width: 100px;
height: 30px;
background: skyblue;
border: 1px solid #ddd;
border-radius: 10px;
outline: none; /* 去除选中状态框 */
color: #000;
/*transition: background 0.3s ease-in, /*复杂方式实现*/ /*
color 0.3s ease-in; */
transition: all 0.3s; /* 简易方式实现 */
}
input:hover {
background: blue;
color: #fff;
}
</style>
</head>
<body>
<div></div>
<input type="button" value="按钮">
</body>
</html>