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

前言

大家还记得我们的轮播图嘛。在一行中放入几张图片,只给盒子一张图片的大小,让几个图片通过位置的移动慢慢滚动呈现出来。
其实动画的原理也是如此。这节博客就以奔跑的熊案例来讲解如何单纯利用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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值