css3随机背景图片

CSS3是一门强大的样式语言，可以用来为网页添加各种炫酷的效果，其中之一就是随机背景图片。

html {
  height: 100%;
  background: url(bg1.jpg) center center fixed no-repeat;
  background-size: cover;
}

body {
  height: 100%;
}

@keyframes changeBg {
  0% {
    background-image: url(bg1.jpg);
  }
  25% {
    background-image: url(bg2.jpg);
  }
  50% {
    background-image: url(bg3.jpg);
  }
  75% {
    background-image: url(bg4.jpg);
  }
  100% {
    background-image: url(bg5.jpg);
  }
}

body {
  background-image: url(bg1.jpg);
  animation-name: changeBg;
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
} 

代码中通过设置HTML的背景图片，再通过设置BODY的高度为100%和动画来实现背景图片的随机切换。定义了5个不同的图片来实现切换，动画的持续时间为10秒，缓动效果为ease-in-out，重复次数为无限次。