css3图片循环代码

CSS3的循环动画功能让网页元素的呈现更加生动，图片的循环播放是其中比较常见的一种。以下是一份使用CSS3实现图片循环动画的代码：

.anim {
    display: inline-block;
    background-image: url("img/1.jpg"); /*默认显示第一张图片*/
    width: 200px;
    height: 200px;
    animation: myanim 6s infinite;
}

@keyframes myanim {
    0% { background-image: url("img/1.jpg"); }
    20% { background-image: url("img/2.jpg"); }
    40% { background-image: url("img/3.jpg"); }
    60% { background-image: url("img/4.jpg"); }
    80% { background-image: url("img/5.jpg"); }
    100% { background-image: url("img/1.jpg"); }
}

以上代码定义了一个名为.anim的CSS类，它的背景图片为一个宽高均为200像素的图片，同时使用了名为myanim的循环动画。该动画从0%到100%共计6秒，在不断循环中让图片依次展现1.jpg到5.jpg，并回到第一张图片。

应用该动画的元素可以是HTML上的任意标签，如div、a等，只需将其class属性值设为.anim即可。