鼠标放上去时 的过渡动画效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 20px;
border: 1px solid red;
text-align: center;
border-radius: 10px;
color: red;
box-shadow: 2px 2px 10px firebrick,
-2px 2px 10px firebrick,
2px -2px 10px firebrick,
-2px -2px 10px firebrick;
transition: 1s linear 0s;
}
div:hover{
box-shadow: none;
width: 150px;
height: 40px;
box-shadow: none;
background-color: crimson;
color: aliceblue;
}
</style>
</head>
<body>
<div >按钮</div>
</body>
</html>