利用CSS3动画制作“百度浏览器”官网奔跑的北极熊

 

现在各大浏览器的官网是越做越炫酷了。比如百度浏览器官网，虽然我不用这个浏览器呢（只用原版Chrome，不为其他，只因国内换壳的浏览器内核版本太低，跟Chrome官方始终有差距）。但是不得不佩服百度的设计师，页面动画做的确实漂亮。

其实这熊熊就是一个png图，长长的，把熊熊奔跑的动作分解成了几帧。（没法改背景色，大家可以下这个图在自己电脑上看下）

 

整个百度浏览器官网动画基本上都是CSS3结合JS去实现的。

今天我们就用CSS3实现这个小熊奔跑的动画。

第一步：先用一个div，制作熊熊本体。图片作为这个熊熊的背景添加。

<!-- 熊熊标签 -->
<div class="bear">
</div>
<!-- 熊熊标签 end -->

body{
     background: #22184a;
}
.bear{
	width: 200px;
	height: 100px;
	background:url(images/bearrun.png) repeat-x;
}

说明下：

1、div的宽高值。整个熊熊图片是1600px，高100px，里面有 8 帧。所以，div.bear的高是100px，宽200px。

2、背景一定要 repeat-x。垂直方向的重复没必要，但是一定不能  no-repeat。 因为，这个熊熊动画本质上是图片的轮流出现实现的。如果 no-repeat，图片移动完毕后，会出现空当。

第二步：制作小熊出现的动画。

@keyframes bearComing{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(600px);
    }
}

这个动画就是让熊熊移动 600px。把它应用在 div.bear 上。

.bear{
	width: 200px;
	height: 100px;
	background:url(images/bearrun.png) repeat-x;
      animation:bearComing  7s  both;
}

第三步：让熊熊奔跑起来。熊熊的奔跑其实就是挨个出现图片背景的不同帧。但是图片的出现不是循序渐进的，而是200px  400px 这样间隔 帧图宽度倍数出现的。听起来很复杂，其实很简单。先写上奔跑动画。

@keyframes bearRun {
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: -1600px 0;
    }
}

说明下：这里利用 background-position 控制背景图位移。 为什么是 -1600px？ 因为图片要往左位移。1600 刚好是图片的宽度。

把动画应用在 div.bear 上，完工~！

.bear{
	width: 200px;
	height: 100px;
	background:url(images/bearrun.png) repeat-x;
    animation:bearComing 7s both, bearRun  1s   infinite steps(8);
}

animation的steps 就是要分几步展示图片。图片中共有8帧，所以 就写 数字 8 。

从这里也可以看出来，animation 可以同时运用多个动画，多个动画之间用逗号隔开。

百度浏览器官网上的“极光”，背景的“远山”动画都是这个原理的，大家有兴趣可以高仿下。