<style media="screen">
.main{
margin: auto;
margin-top: 100px;
width: 200px;
height: 200px;
background: linear-gradient(to top right,pink,green);
border-radius: 50%;
transition: transform 2s ease, border-radius 3s ease-out; // 多个属性逗号隔开
}
.main:hover{ //鼠标hover时候的状态
transform: rotate(-80deg); // 实现转换
border-radius: 0px;
}
</style>
<body>
<div class="main">
</div>
</body>
.main{
margin: auto;
margin-top: 100px;
width: 200px;
height: 200px;
background: linear-gradient(to top right,pink,green);
border-radius: 50%;
transition: transform 2s ease, border-radius 3s ease-out; // 多个属性逗号隔开
}
.main:hover{ //鼠标hover时候的状态
transform: rotate(-80deg); // 实现转换
border-radius: 0px;
}
</style>
<body>
<div class="main">
</div>
</body>
