CSS 无缝轮播案例

写在前面

天猫淘宝的美丽漂亮的衣服或者其他物品的图片一张张从眼前流转 ，总是让人忍不住去点击购买。若自己能够用所学的知识做到这个效果，那肯定是最好不过了。

一 ，主要步骤

<1>布局

1，用

建立浏览窗口，设定好width height 。
2，使用列表标签

• 排列主要内容。

  <2>动画效果。

  CSS3 @keyframes 规定动画的具体内容。用 animation 将@keyframes 绑定到

  ，使
  运动起来。

  CSS3动画 无缝轮播：

  让第一组图片和最后一组图片保持一致，计算好在窗口停留的时间 和一组图片转换到另外一组图片的时间。

  轮播案例的效果：9张照片在显示3张图片的窗口轮流播放。

  
  图片共9张分为3组.png
  
  图片第一组.png
  
  
  
  图片第二组.png
  
  
  
  图片第三组.png

  动画的代码

   @keyframes mymove {
              0% {
                  margin-left: 0;
              }
              20% {
                  margin-left: 0;
              }
              30% {
                  margin-left: -1200px;
              }
              70% {
                  margin-left: -1200px;
              }
              80% {
                  margin-left: -2400px;
              }
              100% {
                  margin-left: -2400px;
              }
          }
  

   .banner ul {
              width: 300%;
              height: 100%;
              padding: 0;
              margin: 0;
              list-style: none;
              border: 1px solid red;
              animation: mymove 8s linear infinite;
             
          }
  

  要使9张图片 每次只显示3张图片出现，需要在浏览窗口所在的

  中 设定 overflow:hidden;
  另，如果需要实现鼠标移动到图片上 ， 轮播暂停时: ul:hover{animation-play-state: paused;}

  二 ，知识点

  animation的所有属性

  

  动画的属性.png

  例如

  div  { 
     animation-name:  myfirst; 
     animation-duration:  5s;
    animation-timing-function:  linear; 
    animation-delay:  2s; 
    animation-iteration-count:  infinite; 
    animation-direction:  alternate;
    animation-play-state:  running;
  }
  

  简单写法
  animation:myfirst 5s linear 2s infinite alternate;

  其他相关的动画知识点 ，后期运用再继续分享 。
  以上！