css3图片循环显示 |maven js css 版本号

CSS3的图片循环显示功能实现需要用到animation属性。该属性可以定义一个动画，让页面元素在一定时间内完成连续的动作。

.animation{
animation:picLoop linear 10s infinite;
}
@keyframes picLoop{
0%{
background:url(pic1.jpg) no-repeat center center;
}
25%{
background:url(pic2.jpg) no-repeat center center;
}
50%{
background:url(pic3.jpg) no-repeat center center;
}
75%{
background:url(pic4.jpg) no-repeat center center;
}
100%{
background:url(pic1.jpg) no-repeat center center;
}
}

该代码中，大家定义了一个名为picLoop的动画，该动画使用了linear的时间函数，表示动画在一开始和结束的时候会有一个缓动过程。

通过@keyframes关键字定义动画每一帧的样式，大家可以看到，在动画的持续时间内，页面的背景图片会轮流显示四张图片，最终回到开始的图片，这样就完成了一个循环显示的效果。

为了让动画循环播放，大家使用了infinite属性值，表示动画无限循环。

总结一下，通过使用CSS3的animation属性，大家可以实现图片的循环显示效果，这种效果可以让大家的网页更加动态和吸引人。