css中怎么让一张图循环移动

CSS是用来美化网页的一种标记语言，它可以让我们的网页变得更加丰富多彩。今天，我们要介绍的是如何让一张图循环移动，这需要使用CSS3的动态属性。

 .moving-image{
        position: absolute;
        animation: move 4s infinite linear;
    }

    @keyframes move {
        0% {
            left: 0;
        }
        100% {
            left: calc(100% - 200px);
        }
    } 

首先，在CSS中我们需要给图片一个定位属性，让它可以在页面中任意移动。将图片的定位属性设置为“absolute”即可。然后，在CSS3中有一个新的属性叫做“animation”，这个属性可以让元素动起来。我们给图片添加一个动画属性，它的值包括四个部分：动画名称、动画持续时间、动画播放次数和动画执行方式。

在上面的代码中，我们给图片设置了一个名称为“move”的动画，动画持续时间为4秒，动画会一直循环播放，并且执行方式为“linear”，即匀速移动。

接下来，我们需要使用CSS3中的“@keyframes”属性来定义动画的运动轨迹。我们将这个属性设置在图片样式的外面，然后在里面定义了从0%到100%之间的动画轨迹变化。在这个例子中，我们设置了图片从页面的最左侧移动到页面的最右侧，然后再从最右侧移动回来，一直循环移动。

最后，将class为“moving-image”的图片添加到需要移动的位置即可。这里需要注意的是，如果要显示图片的话，需要给图片添加src属性，同时在CSS样式中给图片设置宽度和高度。

通过以上步骤，我们就可以让图片做循环移动了，非常简单易懂，希望对大家有所帮助。