css的背景自动变换

网页设计中的背景色一直都是一个非常重要的组成部分，然而，一直静态不变的背景色可能会让人感到单调乏味。为了让你的网页更加生动，许多设计师们开始使用CSS的背景自动变换特性。

CSS提供了各种各样的方法可以实现背景自动变换。我们可以利用linear-gradient()函数创建渐变效果，也可以使用CSS动画来驱动背景色过渡。但是，在这篇文章中，我们将重点关注CSS中background-image的url属性。该属性可以设置多个背景图像，我们可以使用CSS3中新增的animation功能，实现轮流显示这些背景图像，从而让背景色呈现自动变换的效果。

<style> body{
  
   
   background-image: url(image1.jpg), url(image2.jpg), url(image3.jpg);
  
   
   background-size: cover;
  
   
   animation: bgswitch 10s infinite;
  
}
  
  
  @keyframes bgswitch{
  
   
   0% {
background-image: url(image1.jpg);
}
  
   
   33% {
background-image: url(image2.jpg);
}
  
   
   66% {
background-image: url(image3.jpg);
}
  
   
   100% {
background-image: url(image1.jpg);
}
  
}
 </style>

在上述代码中，我们定义了一个具有三个不同背景图像的body元素，并为其添加了一个名为bgswitch的CSS动画。bgswitch动画的duration设置为10秒，并无限循环。bgswitch关键帧中指定了0%、33%、66%和100%的改变，当动画执行时，它们分别使用不同的图片改变背景。

当然，你可以根据你自己需要的设定值来进行更改。这只是其中的一个例子。你可以轻松地将其应用到你自己的网页上，只需要替换掉我们所使用的图片链接即可。