[分享]css中如何让图片动起来

CSS（Cascading Style Sheets）是用于网页设计的一种样式表语言， 它给我们的网页带来了更加丰富的效果。 在 CSS 中，我们可以使用各种技巧来使图片动起来，下面我们就来详细了解其...

CSS（Cascading Style Sheets）是用于网页设计的一种样式表语言， 它给我们的网页带来了更加丰富的效果。 在 CSS 中，我们可以使用各种技巧来使图片动起来，下面我们就来详细了解其中一种技巧。

要使图片动起来，我们可以使用 CSS3 中的 animation 属性。animation 属性主要用于定义动画的总体属性，包括动画名称、持续时间、重复次数等。

/* 定义动画 */
@keyframes move {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(300px);
    }
}

/* 应用动画 */
img {
    animation: move 2s linear infinite;
} 

在上述代码中，我们首先使用了 @keyframes 声明了一个名为 move 的动画，其中 0% 表示动画的开始状态，100% 表示结束状态。我们这里以 X 轴方向上的平移为例，使用了 transform 属性来实现。

接下来，我们将动画应用到图片上，通过 animation 属性指定动画名称、持续时间、动画速度等属性。上述代码的意思是，将动画 move 应用到 img 标签上，持续时间为 2s，线性匀速运动，无限循环执行。

CSS 中还有很多其他的动画效果，比如旋转、缩放、淡入淡出等，有兴趣的读者可以自行了解。