css背景图旋转

CSS 背景图旋转是一种非常好看的设计风格，它可以让网页看起来更加生动活泼。在 CSS 中，我们可以使用 transform 属性来实现背景图旋转的效果。

.bg {
  background-image: url("bg.png");
  transform: rotate(20deg);
}
 

在上面的代码中，.bg 是需要旋转的元素的类名，其中 background-image 属性用于设置背景图，transform 属性用于旋转元素。其中，rotate(20deg) 表示旋转 20 度，可以根据需要调整旋转角度。

如果要实现循环旋转的效果，我们还需要使用 animation 属性。下面的代码演示了如何实现每 3 秒钟旋转一次背景图的效果：

.bg {
  background-image: url("bg.png");
  animation: rotate 3s infinite linear;
}
@keyframes rotate {
  from {
  
  transform: rotate(0deg);
}
  to {
  
  transform: rotate(360deg);
}
}
 

在上面的代码中，@keyframes 定义了一个动画序列，从 0 度旋转到 360 度旋转。而 animation 属性则指定了动画的名称、时长、播放次数和速度。

细心的朋友可能会发现，上面的代码中使用了 infinite 关键字，表示动画无限循环。因此，这里需要注意，如果我们不希望动画一直播放下去，就需要手动停止动画。

综上所述，CSS 背景图旋转是一种简单优雅的设计风格，可以让网页看起来更加美观。我们可以使用 transform 属性和 animation 属性来实现旋转效果，在使用时需要注意控制动画的播放次数和速度。