css动画 ：奔跑的熊案例分析

css动画 ：奔跑的熊案例分析

越行勤 537 2021-01-08

奔跑的熊案例分析

设计到的知识点

  1. 背景图片
  2. 动画
  • steps 重点
  1. 伪元素

最终效果，可以 点我查看

小熊奔跑

这个小熊不是gif，而是这样一张png

看到这张图片，我急想到了连环画的效果，我们只需要准备个一个小熊大小的div，每次只显示一个小熊，然后滚动div就好了。

那么直接开始操作：

  • 准备的盒子：.bear::before用伪元素就好了，伪元素是行内元素，而且必须要有content属性。小熊大小 : width: 200px;height: 100px; 那么盒子也这么大

            .bear::before {
			display:block;
            content: '';
            margin-left: -100px;
            width: 200px;
            height: 100px;

        }

  • 放入小熊

    background: url(./bear.png) no-repeat;

  • 准备的动画 使小熊循环 动

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

            100% {
                background-position: -1600px 0;
            }
        }
		animation: bear 1s  infinite;

    1

    显然 ease无法实现这个效果 我们要是用 steps

    每次向左移动 200px

    animation: bear 1s steps(8) infinite

  • 完善 最后在使用定位哇 啥的调整一下位置 在完成完成一个动画 使他走到屏幕中心

背景的移动

其实和小熊移动并无两样，但是 值得注意的是

背景图图片不能no-repead,背景图片填充要 repeat-x ，要不然无法使无无缝衔接的形成背景在滚动的效果

无法无缝衔接.gif

最后细致的调整一下参数，定位啥的 ，可以让后面的山移动慢一点，前面的快一点，这样更更有效果。

结语

放假咸鱼的第14天
微信小程序

CSS