css动画旋转角度

CSS动画是前端开发中不可或缺的一部分，它能让我们的网站更加生动有趣。今天，我们来讲一下如何使用CSS实现图片旋转的动画效果。

  /* CSS代码 */
  .my-img {
    width: 100px;
    height: 100px;
    transition: transform .3s; /* 定义动画过渡时间 */
  }
  .my-img:hover {
    transform: rotate(360deg); /* 定义旋转角度 */
  }

以上代码中，我们先定义了一个名为“my-img”的CSS类，设定图片的宽高，同时指定了动画过渡时间为0.3秒。接下来，在:hover伪类里，我们通过CSS的transform属性来实现旋转动画。定义旋转角度为360度，当鼠标悬浮在图片上方时，动画效果就会立即触发。

至此，一个简单的图片旋转动画就完成了！如果你想实现更多复杂的动画效果，你还可以通过CSS的animation属性来进一步完善动画效果。