快来看大熊跑起来了

我正在参加 码上掘金体验活动，详情：show出你的创意代码块”

前言

听说掘金新上了个“码上掘金”的功能，于是也想来凑个热闹。根据活动要求连续发了几天沸点，最终还薅到了阳光普照。活动作品分别有：水波纹效果，旋转木马，奔跑的大熊，图片放大镜，3d导航栏等。并且还很荣幸的得到了运营小姐姐（或小哥哥）的邀请，于是决定再拿一个案例来参加一下更文活动（虽然不可能中奖）

代码块地址

code.juejin.cn/pen/7088106…

涉及css知识点

本案例实现其实也很简单，主要涉及到的css中的知识点如下：

• translateY 在本案例中用来设置大熊垂直居中
• background-position 在动画中设置背景位置
• @keyframes定义动画
• animation: 设置动画
• animation-timing-function：动画属性

原理及思路分析

基本思路：如下图所示一张图片上有8个不同状态的大熊，每个大熊的宽度大约是160px，我们定义一个宽为160px的div盒子，然后把这个图片作为盒子的背景图片，然后通过动画控制背景图片的位置，先定义一个bear动画，每次向左移动一个大熊的的位置（160px），所以8个大熊（背景图片的总宽度）就是移动8次，这里我们可以通过指定animation-timing-function的属性为steps(8)来实现分8次移动，这样大熊就能够跑起来了，但是还不够现在的大熊只能原地奔跑。为了能够让它向前跑，我们还需再定义一组盒子移动的动画move。让盒子从左边移动到右边。两组动画组合起来，大熊就能够真正的向前奔跑了。

<div id="app"> <div class="bear"></div></div>

    body {
         background-color: #000;
      }

    .bear {
        position: absolute;
        width: 160px;
        height: 80px;
        top: 50%;
        transform: translateY(-50%);
        background: url(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8d92355bda314d1e9b07bf07f3e9c5fa~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp) no-repeat;
        animation: bear 1s steps(8) infinite, move 5s linear infinite;
    }


    @keyframes bear {
        0% {
            background-position: 0 0;
        }

        100% {
            background-position: -1280px 0;
        }
    }

    @keyframes move {
        0% {
            left: 0;
        }

        100% {
            left: 100%
        }
    }