animation动画小实例讲解

最新推荐文章于 2022-05-05 12:46:11 发布

原创

最新推荐文章于 2022-05-05 12:46:11 发布 · 378 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#动画 #css #html

本文通过CSS的animation属性详细讲解如何利用静态图片素材创建动画效果，内容来源于爱给网的免费游戏素材。

使用css的animation用静态图实现动画效果

静态图片素材来源于游戏免费下载 - 爱给网：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>幻想三国志2楚歌行走动画</title>

    <style>
        .xingZouDongHua{
            /* 根据素材图选定展现的区域大小 */
            width: 120px;
            height: 544px;

            /*注意图片存放路径*/
            background-image: url(./images/楚歌行