<style>
#d1{
width:200px;
height:200px;
border:1px solid #000;
transition:background 4s linear,transform 5s linear;
}
//当鼠标移入div上时
#d1:hover{
background:#ddd;
transform:rotate(45deg) scale(0.5);
}
</style>
<body>
//页面中有一个div
<div id="d1"></div>
</body>
当鼠标移入div上时，div的背景色在4s之内渐变为灰色，同时在5s之内顺时针旋转45度，且尺寸缩小一半；当鼠标移走时，再渐变恢复初始样式
原文：https://www.cnblogs.com/Dcode/p/12995323.html