• 【CSS3】CSS3 动画 ⑥ ( 动画属性示例 | 精灵图帧动画效果实现 )

    文章目录





    一、需求说明


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

    下图的大小是 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;
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    3、动画实现


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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12




    三、完整代码示例


    代码示例 :

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54

    执行结果 :

    在这里插入图片描述

  • 相关阅读:
    Perceptron, Support Vector Machine and Dual Optimization Problem (3)
    风控模型中有多个目标需要预测怎么办？来看看这份分类实操内容
    2023 最新 Git 分布式版本控制系统介绍和下载安装使用教程
    【计算机网络】物理层：物理层要解决哪些问题？
    数字藏品平台系统开发实战-概述
    算法训练优化的经验：深入任务与数据的力量
    在gitee上建自己的博客
    Nginx版本升级
    微信公众号运营的那些实用技巧，你了解多少？
    CAD新建文件快捷方式 开启显示文件选项卡
  • 原文地址：https://blog.csdn.net/han1202012/article/details/132219452