奔跑的熊案例分析

设计到的知识点

  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天
微信小程序

Q.E.D.


努力学习的小菜鸟