用一张长图片写动画——奔跑的大熊

最新推荐文章于 2022-11-10 11:19:26 发布

巧克力小猫猿

最新推荐文章于 2022-11-10 11:19:26 发布

阅读量372

点赞数

本文链接：https://blog.csdn.net/zxdznyy/article/details/126452774

版权

前端三剑客专栏收录该内容

20 篇文章 3 订阅

订阅专栏

文章目录

前言
一、图片资源
二、原理
三、完整代码

前言

大家还记得我们的轮播图嘛。在一行中放入几张图片，只给盒子一张图片的大小，让几个图片通过位置的移动慢慢滚动呈现出来。
其实动画的原理也是如此。这节博客就以奔跑的熊案例来讲解如何单纯利用css让图片动起来。

一、图片资源

在这里插入图片描述

二、原理

这张图片的宽度是1600px，一共是8帧。我们只需要给一个1600/8，也就是200px的盒子，并且让这张图片向左移动，就可以让大熊跑起来。

图片的速度曲线利用steps步长，一次向左挪动200px即可让大熊图片一帧一帧向左移动。

动画部分代码如下：

        .bear {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url('./运动的熊.png') no-repeat;
            animation: bear 1s steps(8) infinite;
            /* 元素可以添加多个动画，用逗号分隔 */
        }
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }

这样大熊就可以在div中一直运动了。
但是想要做出大熊运动的同时往前跑，我们就需要再给盒子加一层动画。
== 元素可以有两个动画，只需要在animation属性中用逗号隔开即可==
所以我们给盒子又加了个动画，让它往前挪动，并在animation属性中添加。
代码如下：

       .bear {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url('./运动的熊.png') no-repeat;
            animation: bear 1s steps(8) infinite, move 5s forwards;
            /* 元素可以添加多个动画，用逗号分隔 */
        }
                @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                transform: translate(-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>Document</title>
    <style>
        body {
            background-color: #ccc;
        }
        .bear {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url('./运动的熊.png') no-repeat;
            animation: bear 1s steps(8) infinite, move 5s forwards;
            /* 元素可以添加多个动画，用逗号分隔 */
        }
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                transform: translate(-50%);
            }     
        }
    </style>
</head>
<body>
    <div class="bear"></div>
</body>
</html>

巧克力小猫猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用一张长图片写动画——奔跑的大熊

大家还记得我们的轮播图嘛。在一行中放入几张图片，只给盒子一张图片的大小，让几个图片通过位置的移动慢慢滚动呈现出来。其实动画的原理也是如此。这节博客就以奔跑的熊案例来讲解如何单纯利用css让图片动起来。
复制链接

扫一扫