CSS 无缝轮播案例

写在前面

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

一，主要步骤

<1>布局

1，用<div>建立浏览窗口，设定好width height 。
2，使用列表标签<ul> <li> 排列主要内容。

<2>动画效果。

CSS3 @keyframes 规定动画的具体内容。用 animation 将@keyframes 绑定到<ul> ，使<ul>运动起来。

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张图片出现，需要在浏览窗口所在的<div>中设定 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;

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