使用html5和css3动画制作网页轮播图效果_css轮播图一定要图片大小一样吗

@keyframes是一个类似于关键帧，可以做多个状态的变化

注意：keyframes 里面必须是整数

制作动画分为俩步：

1 定义动画

2 使用动画

1 定义动画

@keyframes move {
    0%{
        background: url(../picture/o.jpg
        );
    }
    20%{
        background: url(../picture/p.jpg
        );
    }
    40%{
        background: url(../picture/q.jpg
        );
    }
    60%{
        background: url(../picture/r.jpg
        );
    }
    80%{
        background: url(../picture/s.jpg
        );
    }
   100%{
        background: url(../picture/t.jpg
        );
    }
    
}

 2 使用动画

.select-a-s {
    position: absolute; //定位轮播图图片的位置 
 
    left: 210px;
 
    top: 10px;
 
    height: 480px; //设置轮播图图片的大小，统一图片的大小
 
    width:580px;
 
    animation-name:move ;//规定@keyframs动画名称（必须有）
 
    animation-duration: 15s;//规定完成动画所需要的时间，默认是0s(必须有)
 
    animation-timing-fun