奔跑的熊案例分析

设计到的知识点

1. 背景图片
2. 动画

• steps 重点

3. 伪元素

最终效果，可以 点我查看

小熊奔跑

这个小熊不是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;
  

  

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

  每次向左移动 200px

  animation: bear 1s steps(8) infinite

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

背景的移动

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

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

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

结语

放假咸鱼的第14天