鼠标经过旋转效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标经过旋转效果</title>
<style type="text/css">
.img {
   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: transform 1.5s;
}
.img:hover {
   transform: rotate(1turn);
}
</style>
</head>
<body>
<div class="img"> 鼠标经过俺会旋转 </div>
</body>
</html>

Copyright © 2024 码农人生. All Rights Reserved