[分享]css关键帧跑步动画

CSS3中的关键帧动画使得网页设计师们可以创建出更加震撼的动效，而其中一个经典的案例就是跑步动画，许多知名网站都使用了这种动画方式，今天我们就来看看如何用CSS来实现它吧。keyframes runn...

CSS3中的关键帧动画使得网页设计师们可以创建出更加震撼的动效，而其中一个经典的案例就是跑步动画，许多知名网站都使用了这种动画方式，今天我们就来看看如何用CSS来实现它吧。

@keyframes running {
    from { background-position: 0 0; }
    to { background-position: -6000px 0; }
}

.runner {
    width: 220px;
    height: 100px;
    background-image: url(runners.gif);
    background-repeat: no-repeat;
    animation: running 1s steps(28) infinite;
} 

首先，我们需要做的是定义一个名为“running”的关键帧动画。这个动画包含两个关键帧：from和to。from关键帧中，我们定义了背景图片的初始位置为(0,0)，也就是图片的左上角（原点），to关键帧中，我们将背景图片往左移6,000像素（如果你的图片宽度不足6,000像素，到了边缘会出现重复），达到了不断移动到左边的效果。

接下来就是在CSS中的类名为“.runner”的元素上调用动画并设置一些样式属性。在这个案例中，我们设置宽度和高度为220像素和100像素，背景图片为一个包含了28帧动画的图片，并设置动画的步长为28（也就是28张图片），动画的播放时长为1秒钟，最后设置无限循环。

这样一来，你就可以在你的网站上添加一个逼真的跑步动画啦！