show出创意，show出最佳中秋月饼🥮

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

中秋节到啦！怎么能不吃月饼呢？

今天，我们用码上掘金实现一个月饼轮播图，可以循环播放各种各样好吃的月饼噢～

首先，我们要准备一些美味的月饼图片：

其次，我们需要明白一个重要的CSS属性：background-image，它可以把一个图片当做背景图。

它的值使用url("图片地址")这样子的格式。

在掘金里，要加载一个图片，我们直接用掘金的图片就好，避免跨域问题。写文章的时候，我们上传图片，刚好就能获得图片的链接啦。

#app {
  background-image: url("https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/92cad12bbeb74da1a811aededd9688a6~tplv-k3u1fbpfcp-watermark.image");
}

但是这样写，并不能看到图片，为什么呢？

原来是div默认的尺寸是0 * 0的，宽度高度都是0，所以就不展示啦。

#app {
  background-image: url("https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/92cad12bbeb74da1a811aededd9688a6~tplv-k3u1fbpfcp-watermark.image");
  width: 300px;
  height: 500px;
}

我们这样写，就出现啦。

但是还有个问题，这个月饼，重复出现了太多次，我们需要调整一下宽度和高度，把div的尺寸调整成跟图片一样就好啦

#app {
  background-image: url("https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/92cad12bbeb74da1a811aededd9688a6~tplv-k3u1fbpfcp-watermark.image");
  width: 258px;
  height: 196px;
}

只出现了一个盘子，真是太美味啦

然后我们要切换图片，该怎么办呢？

需要修改background-image属性，比如改成这样：

#app {
  background-image: url("https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ca9c6a48e51d4e138640a55f183d397e~tplv-k3u1fbpfcp-watermark.image");
  width: 258px;
  height: 196px;
}

但是发现换了个图片后，尺寸又变了，咋办呀

可以把background-size改一下，改成cover，这样就不会重复出现啦。

怎么自动切换图片呢？

可以弄个CSS动画，定时切换图片。

#app {
  width: 258px;
  height: 258px;
  background-size: cover;
  animation: 20s linear infinite both change;
}

@keyframes change {
  0% {
    background-image: url("https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/92cad12bbeb74da1a811aededd9688a6~tplv-k3u1fbpfcp-watermark.image");
  }
  17% {
    background-image: url("https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ca9c6a48e51d4e138640a55f183d397e~tplv-k3u1fbpfcp-watermark.image");
  }
  33% {
    background-image: url("https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/92cad12bbeb74da1a811aededd9688a6~tplv-k3u1fbpfcp-watermark.image");
  }
  50% {
    background-image: url("https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6ffeadee1252432aa9ec5ffd57cf702b~tplv-k3u1fbpfcp-watermark.image");
  }
  67% {
    background-image: url("https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eb69ee9abf5a4757b525ee6fb74eecea~tplv-k3u1fbpfcp-watermark.image");
  }
  83% {
    background-image: url("https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/92cad12bbeb74da1a811aededd9688a6~tplv-k3u1fbpfcp-watermark.image");
  }
  100% {
    background-image: url("https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/92cad12bbeb74da1a811aededd9688a6~tplv-k3u1fbpfcp-watermark.image");
  }
}

重点就是animation属性和keyframes定义的动画的几个关键帧～