css3 動畫 簡單實現輪播圖

在這之前，先來看一邊animation的屬性：

@keyframes  創建一個動畫

animation 屬性是一個簡寫屬性，用於設置動畫屬性

html代碼：

<div class="div"></div>

css代碼：

 

.div{
width: 100%;
height: 460px;
animation: xm 25s infinite;
}

@keyframes xm{
0%{
background: url(../IMG/circle1.jpg);
background-size: cover;
}
25%{
background: url(../IMG/circle2.jpg);
background-size: cover;
}
50%{
background: url(../IMG/circle3.jpg);
background-size: cover;
}
75%{
background: url(../IMG/circle4.jpg);
background-size: cover;
}
100%{
background: url(../IMG/circle5.jpg);
background-size: cover;
}
}

創建一個區域用來放置我們的輪播圖的位置，在動畫屬性設置對應動畫名稱然后設置25s內完成這個動畫並無限循環，用@keyframes屬性寫一個動畫取名為xm（名字可以隨意取，引用時能夠相對應就好），設定動畫在一次完成的過程內循環更換五次div的背景圖片。