写在前面
天猫淘宝的美丽漂亮的衣服或者其他物品的图片一张张从眼前流转 ，总是让人忍不住去点击购买。若自己能够用所学的知识做到这个效果，那肯定是最好不过了。
一 ，主要步骤
<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;
其他相关的动画知识点 ，后期运用再继续分享 。
以上！
