輪播圖

@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；（兩張圖片的寬度，依次類推....）}

}