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的背景图片。