[分享]css3动画，实现图片轮播

CSS3动画是一种可以使用CSS编写的动态效果。相比于传统的JavaScript动画，CSS3动画具有更好的性能和用户体验。而在网页设计中，图片轮播是一种非常常见的动态效果。下面是一个使用CSS3动画...

CSS3动画是一种可以使用CSS编写的动态效果。相比于传统的JavaScript动画，CSS3动画具有更好的性能和用户体验。而在网页设计中，图片轮播是一种非常常见的动态效果。下面是一个使用CSS3动画实现图片轮播的实例。

 <div id="container">
    <img src="image1.jpg" alt="image1">
    <img src="image2.jpg" alt="image2">
    <img src="image3.jpg" alt="image3">
  </div>

  <br>

  <style>
    #container {
      width: ***px;
      height: 400px;
      position: relative;
    }

    #container img {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      opacity: 0;
      z-index: -1;
      animation: slideshow 20s linear infinite;
    }

    #container img:nth-child(1) {
      opacity: 1;
      z-index: 1;
    }

    #container img:nth-child(2) {
      animation-delay: 5s;
    }

    #container img:nth-child(3) {
      animation-delay: 10s;
    }

    @keyframes slideshow {
      0% {
        opacity: 0;
        z-index: -1;
      }
      5% {
        opacity: 1;
        z-index: 1;
      }
      20% {
        opacity: 1;
        z-index: 1;
      }
      25% {
        opacity: 0;
        z-index: -1;
      }
      100% {
        opacity: 0;
        z-index: -1;
      }
    }
  </style> 

代码解释：

首先，在HTML中添加一个id为container的div，在其中添加需要轮播的图片。通过CSS设置container的宽高以及position属性为relative，使得其中的子元素可以通过绝对定位来实现轮播。

对于每一个图片元素，设置其position为absolute，width和height为100%，left和top为0，使得图片可以覆盖整个container。opacity为0则图片不可见，z-index为-1则图片默认处于最下层。animation属性用来设置其动画，slideshow为动画名称，20s为动画播放时间，linear为动画变速函数，infinite用来指定动画无限循环。

接下来，通过nth-child属性来指定每一张图片的位置和动画延迟时间，即通过animation-delay属性来实现轮播效果。第一张图片需要设置opacity为1和z-index为1来使其默认可见。第二张和第三张图片需要分别延迟5秒和10秒开始播放，确保每张图片在正确的时间显示。

最后，通过@keyframes语句来设置动画的具体过程，通过opacity属性来控制图片的透明度，通过z-index属性来确定图片的层级关系，从而实现图片的轮播。