鼠标经过宽度变长效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标经过宽度变长效果</title>
<style type="text/css">
.demo {
   margin: 250px auto;
   width: 250px;
   height: 250px;
   border: 5px solid #ccc;
   background: #cce8cf;
   text-align: center;
   font-weight: 700;
   font-size: 18px;
   line-height: 4.854;
   transition: width 1.5s;
}
.demo:hover {
   width: 500px;
}
</style>
</head>
<body>
<div class="demo"> 鼠标经过俺会变长 </div>
</body>
</html>

Copyright © 2023 码农人生. All Rights Reserved