css正方形旋转动画 |css 图片高宽比例固定

.square {
width: 100px;
height: 100px;
background-color: #F44336; /* 设置背景色 */
transform: rotate(0deg); /* 设置旋转角度 */
transition: transform 1s; /* 设置过渡动画 */
}
.square:hover {
transform: rotate(360deg); /* 鼠标悬停时设置旋转角度 */
}

代码中，大家首先定义了一个class为square的元素，它是一个100*100的正方形，并设置了背景色。然后大家使用transform属性来设置正方形的旋转角度，同时使用transition属性来设置过渡动画，让它产生流畅的效果。

最后大家使用:hover伪类来监听鼠标悬停动作，当鼠标悬停时，大家改变transform属性的值，让正方形旋转360度。

通过以上步骤，大家就成功地实现了正方形旋转动画效果。这种动画效果能够很好地为网页增添活力，吸引用户的注意力。如果您希望网页更加生动有趣，欢迎您在网页设计中使用这种动画效果。