文章目录





一、需求说明


给定一张精灵图 , 其中有多个 动画帧 对应的图片 ,

下图的大小是 1600 x 100 像素 , 截图展示如下 :

在这里插入图片描述

实际图片 :
请添加图片描述





二、代码分析



1、动画属性


使用上图实现 逐帧动画 效果 ;

实现逻辑是 设置 元素的 animation-timing-function 动画属性 , 使用 steps(n) 属性值指定动画步长 ;

设置一个盒子模型 , 显示指定的背景图片 ;

上述 精灵图 中 , 有 8 张 熊图片 ,

设置 动画的步长 为 8 , 每个步骤显示一张图片 ,

第一步 , div 盒子模型 显示 精灵图 中的第一张图片 , 作为背景图片 ;

在这里插入图片描述

第二步 , div 盒子模型 显示 精灵图 中的第二张图片 ,
在这里插入图片描述

第三步 , div 盒子模型 显示 精灵图 中的第三张图片 ,
在这里插入图片描述

最后一步 , 也就是第八步 , div 盒子模型 显示 精灵图 中的第八张图片 , 同时也是最后一张图片 ;

在这里插入图片描述


2、布局分析


精灵图 总体大小为 1600 x 100 像素 , 其中每个图的大小为 200 x 100 像素 ,

这里 将 div 盒子模型的大小设置为 200 x 100 像素 , 正好能装下 一帧 图片 ;

div 盒子 显示精灵图 作为背景图片 , 设置 background: url(images/bear.png) no-repeat; 属性即可 ;

布局的属性如下 :

        div {
            /* 绝对定位 */
            position: absolute;
            /* 设置动画的主要作用元素 */
            width: 200px;
            height: 100px;
            /* 设置背景图片 - 精灵图 */
            background: url(images/bear.png) no-repeat;
            animation: run 1s steps(8) infinite, move 4s infinite;
        }

3、动画实现


奔跑动画实现 : 奔跑的逐帧精灵图尺寸为 1600 x 100 像素 , 设置其从左到右作为 200 x 100 像素的盒子模型的背景图片 , 第一帧 位置为 0 x 0 像素 , 最后一帧显示 , 需要将图片向左移动 1600 像素才可以 ;

        @keyframes run {
            /* 定义奔跑动画 精灵图 切换背景动画 */
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }

从左侧移动到中间的 动画实现 : 直接设置 盒子模型 的 绝对定位 属性 , 初始状态显示在最左侧 , 最终状态 盒子模型 处于中间位置 , 需要先移动到 50% 位置 left: 50%; , 此时盒子模型左侧在中间位置 , 还需要往回走自身的 50% 确保走到中间位置 , 设置 transform: translateX(-50%); 属性即可 ;

        @keyframes move {
            /* 定义盒子模型 从左到右 的 移动动画 */
            0% {
                left: 0;
            }
            100% {
                /* 绝对定位到中间位置 此时盒子模型左侧在中间位置 */
                left: 50%;
                /* 往回走自身的 50% 确保走到中间位置 */
                transform: translateX(-50%);
            }
        }




三、完整代码示例


代码示例 :

<!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>动画属性示例 - 精灵图帧动画效果实现</title>
    <style>
        body {
            background-color: #ccc;
        }
        
        div {
            /* 绝对定位 */
            position: absolute;
            /* 设置动画的主要作用元素 */
            width: 200px;
            height: 100px;
            /* 设置背景图片 - 精灵图 */
            background: url(images/bear.png) no-repeat;
            animation: run 1s steps(8) infinite, move 4s infinite;
        }
        
        @keyframes run {
            /* 定义奔跑动画 精灵图 切换背景动画 */
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        
        @keyframes move {
            /* 定义盒子模型 从左到右 的 移动动画 */
            0% {
                left: 0;
            }
            100% {
                /* 绝对定位到中间位置 此时盒子模型左侧在中间位置 */
                left: 50%;
                /* 往回走自身的 50% 确保走到中间位置 */
                transform: translateX(-50%);
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

执行结果 :

在这里插入图片描述

# css3 # 前端 # css # 动画
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Springboot+MySQL 实现从数据库获取数据展示到前端

1.运行效果效果图如下：2.创建数据库表数据库名为"springboot",数据库表名为"user"，数据库表里面放了5条数据，字段分别为：“id”，“name”，“age”，“email”。3.新建SpringBoot项目1、选择Spring Initial...

avatar 腾讯云开发者社区
cover

腾讯云建官网：一个完整的自助建站的过程，不用代码，2小时就可以制作自己的网站

avatar 腾讯云开发者社区

数据库 实验二 数据库的简单查询和连接查询实验

– l）用Transact-SQL语句表示下列操作．在学生选课库中实现其数据查询操作．– ①求数学系学生的学号和姓名。select sno,sname from student where sdept='MA';– ②求选修了课程的学生学号。select distinct sno from sc;– ③求选修C1课程的学生学号和成绩，并要求对查询结果按成绩降序排列，如果成绩相同则按学号升序排列。s

avatar 腾讯云开发者社区