轮播图笔记！

轮播图

@keyframes: 创建动画

 animation: 动画 （属性）          animation-name：规定@keyframes动画名称     animation-iteration-count：规定动画被播放的次数

“from”和“to”,等同于0%和100% ——用来改变任意多的样式任意多的次数。（注：0%是动画的开始，100%是动画的完成。）

 

　　　　　　<--------这是HTML写法-------->

　　　　　　　　<div class="xx"> ← 命名

  　　　　　　　　　　　　<ol>

　　　　　　　　　　　　　　<li></li>

　　　　　　　　　　　　　　<li></li>

　　　　　　　　　　　　　</ol>

　　　　　　　　　　</div>

　　

　　　　　　　　　　　　<--------这是CSS写法-------->

.xx{width:0px; height:0px; background:red; overflow:hidden; position:relative;}

           宽                    高        　　　　背景色　　　　　　　隐藏溢出　　　　　　相对定位

.xx>ol{width:100%（几个图片就是几倍）; height:0px; animation: xxx     7s    linear   infinite;  position:absolute;}

             　　　　　宽　　　　　　　　　　　高                动画      命名   速度   线性      循环            绝对定位

.xx>ol>li{width:(注：此处宽度为ol的长度除以图片数）；height：0px; float：left； background：blue；}

　　　　　　　宽　　　　　　　　　　　　　　　　　　　　高　　　　　  左浮　　　   背景色（自定义）

.xx>ol>li: first-child{background:url(../img/z.jpg); background-size:100% 100%; }     （依次往下写，有几张图写几个）

　　　　　　　　　　　　　　图片路径　　　　　　　　　　背景图大小

 

@keyframes   xx（动画命名）{

　　　0%， 15%{left：0；}

　　　30%，55%{left：-500px；（此处为一张图片的宽）}

　　　70%；100%{left：-1000px；（两张图片的宽度，依次类推....）}

}