能否仅用单张图片通过CSS实现皮卡丘跑步动画效果？

你提供的代码缺少关键的帧动画定义，另外定位属性需要配合定位规则才能生效，以下是修正后的完整实现方案：

完整代码 #

HTML

<span class="pikaqiu_run"></span>

CSS

.pikaqiu_run {
    width: 80px;
    height: 71px;
    background: url(https://game.gtimg.cn/images/nishiki/web202310/pkq_ani.png);
    background-repeat: no-repeat;
    /* 开启定位让right/top属性生效 */
    position: fixed;
    right: 0;
    top: -71px;
    /* 动画参数：步数对应精灵图帧数，时长控制跑步速度，无限循环 */
    animation: pikaRun 0.5s steps(8, end) infinite;
}

/* 定义帧动画：通过偏移背景图X轴实现逐帧切换 */
@keyframes pikaRun {
    100% {
        background-position-x: -640px; /* 8帧 × 单帧宽度80px = 640px */
    }
}

关键说明 #

• steps(8, end)：精灵图包含8帧跑步动作，steps函数让动画逐帧切换，而非平滑过渡
• @keyframes pikaRun：通过改变background-position-x，让背景图从初始位置向左偏移完整的精灵图宽度，实现帧动画效果
• position: fixed：配合right和top固定元素位置，也可根据需求换成absolute（需父元素设置相对定位）

内容的提问来源于stack exchange，提问作者HEYPIKACHU