利用 CSS3 实现僵尸行走动画

CSS3的出现使用Web页面的开发和展示更加的有趣和多样，同时页面动画的实现也更加的简单，此项目利用 CSS3 中提供的 @keyframes 和 animation 语法实现僵尸行走动画。

项目教学目标：

• 学习 CSS3 中动画实现效果（animation）
• 学习利用绝对定位实现元素的水平和垂直居中

第一步：编写动画主窗口，实现水平和垂直居中

项目目录结构如下：

sprite/           --根目录
  ├── css/        --css文件目录
  └── images/     --图像文件目录  
  index.html      --入口html文件

index.html

style.css

.container {
    /* 绝对定位，结合transform: translate(-50%, -50%) 实现元素的水平和垂直居中 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
 
.container .sprite {
    width: 200px;
    height: 312px;
    border: 1px solid #000000;
}

查看效果

第二步：实现行走动画效果 

利用 CSS3 中的 @keyframes 和 animation 属性，通过移动图像的位移来实现动画效果。

• 图像大小：2000 * 312
• 总共：10帧
• 每一帧：200 * 312

完整的 style.css 代码

.container {
    /* 绝对定位，结合transform: translate(-50%, -50%) 实现元素的水平和垂直居中 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
 
.container .sprite {
    width: 200px;
    height: 312px;
    /* 设置背景图片 */
    background-image: url(../images/walking.png);
 
    /* 播放动画：时长 2 秒一次，让整个动画在 10 个帧之间相互切换，infinite 表示让动画无限次播放 */
    animation: play 2s steps(10) infinite;
    -webkit-animation: play 2s steps(10) infinite;
    -moz-animation: play 2s steps(10) infinite;
}
 
/* 标准语法 */
@keyframes play {
    from {
        background-position: 0px;
    }
 
    to {
        background-position: -2000px;
    }
}
 
@-webkit-keyframes play {
    from {
        background-position: 0px;
    }
 
    to {
        background-position: -2000px;
    }
}
 
@-moz-keyframes play {
    from {
        background-position: 0px;
    }
 
    to {
        background-position: 2000px;
    }
}

查看效果

项目总结：

1. CSS 中利用绝对定位（position: absolute;），结合transform: translate(-50%, -50%); 实现元素的水平和垂直居中。
2. CSS3 中利用 @keyframes 和 animation 实现动画效果