新手求助：如何用5张图片制作超简单的网页HTML动画？

这是最适合新手的实现方式，不用复杂概念，直接用HTML+CSS就能完成：

步骤1：整理图片 #

把你的五张图片统一命名为 image1.jpg、image2.jpg、image3.jpg、image4.jpg、image5.jpg，和HTML文件放在同一个文件夹里（如果是png等其他格式，把后缀改成对应格式即可）。

步骤2：写HTML结构 #

只需要一个用来显示动画的容器：

<!DOCTYPE html>
<html>
<head>
    <title>简单图片动画</title>
    <style>
        /* 这里放CSS代码 */
    </style>
</head>
<body>
    <div class="animation-box"></div>
</body>
</html>

步骤3：添加CSS动画 #

把下面的CSS代码放到上方的<style>标签里，注意把width和height改成你图片的实际尺寸：

.animation-box {
    /* 设置和图片一致的宽高 */
    width: 300px;
    height: 200px;
    /* 调用动画 */
    animation: frame-animation 0.5s steps(5, end) infinite;
}

/* 定义动画关键帧 */
@keyframes frame-animation {
    0% { background-image: url('image1.jpg'); }
    20% { background-image: url('image2.jpg'); }
    40% { background-image: url('image3.jpg'); }
    60% { background-image: url('image4.jpg'); }
    80%, 100% { background-image: url('image5.jpg'); }
}

关键说明 #

• 0.5s是动画总时长：5张图×0.1秒/张=0.5秒
• steps(5, end)让动画直接跳帧，不会出现图片过渡模糊，保证每张图正好显示0.1秒
• infinite表示动画循环播放，去掉则只播放一次
• 必须确保容器宽高和图片一致，否则动画会变形

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