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;
}
}