前言
之前用css写了一个太极图，反响还是挺不错的，然后看到评论区有位小伙伴说让他想起了培训班的点点滴滴，于是我就说那我直接来一个培训班的案例再写一篇吧。
然后他就向我推荐了奔跑的熊，我就网上查了一下，就是使用背景图，然后修改background-position的值来实现的。
我觉得太简单了，于是我就想着能不能用css来实现，然后就有了这篇文章。
太极图的文章地址：用 css 画一个太极图，才几行代码就开始喊难了？
评论截图：
正式开始
先来体验一下效果，点开详情观看效果更佳：
实现思路
奔跑的熊首先肯定是需要把熊画上去的，然后再通过css来控制熊的动画。
这里最主要的是熊，我这个人没啥审美，所以我就在网上找了一些简单的熊的图片，然后用css来复刻一下。
就我这个场景里面的熊，主要分为三个部分，头部，身体，脚部。
ok，那我们就来一个一个的实现。
头部
头部是这个里面最复杂的部分，因为头部里面有眼睛，鼻子，耳朵，还有嘴巴。
先来看看代码：
<div class="head">
<div class="ear left"></div>
<div class="ear right"></div>
<div class="eye left"></div>
<div class="eye right"></div>
<div class="nose"></div>
<div class="mouth"></div>
</div>
然后我们来看看css：
.head {
position: absolute;
top: 10px;
right: 4px;
width: calc(100% / 4);
height: calc(100% / 3);
background: #fff;
border-radius: 25%;
z-index: 2;
}
/* 耳朵 */
.ear {
position: absolute;
width: calc(100% / 3);
height: calc(100% / 3);
background: radial-gradient(gray 45%, #fff 50%);
border-radius: 50% 50% 0 0;
}
.ear.left {
top: -10px;
left: -10px;
transform: rotate(-35deg);
}
.ear.right {
top: -10px;
right: -10px;
transform: rotate(35deg);
}
/* 眼睛 */
.eye {
position: absolute;
width: 20px;
height: 25px;
background: #000;
border-radius: 50%;
}
.eye::before {
content: '';
position: absolute;
top: 8px;
left: 5px;
width: 10px;
height: 10px;
background: #fff;
border-radius: 50%;
}
.eye::after {
content: '';
position: absolute;
top: 10px;
left: 8px;
width: 5px;
height: 5px;
background: #000;
border-radius: 50%;
}
.eye.left {
top: 20px;
left: 20px;
}
.eye.right {
top: 20px;
right: 20px;
}
/* 鼻子 */
.nose {
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%) rotate(-45deg);
width: 20px;
height: 20px;
background: linear-gradient(45deg, #000 50%, transparent 50%);
border-radius: 4px;
}
/* 嘴巴 */
.mouth {
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 20px;
border-radius: 50%;
border: 2px solid #000;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
}
基本上都是使用定位来完成的：
- 耳朵：使用渐变来实现不同的颜色，然后旋转一下，放头顶就好了。
- 眼睛：使用伪元素来实现，里面会有眼瞳和眼仁，所以使用伪元素来实现。
- 鼻子：使用渐变来实现一个三角形，然后圆角过渡一下，再旋转一下就好了，看起来真不错呀。
- 嘴巴：使用圆角来实现一个圆形，然后去掉其他三条边，就成了一个微笑的嘴巴了。
身体
身体就简单多了，就是一个圆形，然后和头对接一下，调整合适的位置。
<div class="body"></div>
.body {
position: absolute;
top: 50px;
left: 210px;
width: calc(100% / 1.9);
height: calc(100% / 2);
background: #fff;
border-radius: 40%;
z-index: 1;
}
简单多了是吧，这个就没什么好说的了。
脚部
脚部我这边设计一个盒子，这个盒子和身体的样式是一样的，然后里面放上四肢还有尾巴，为啥不直接放身体里面呢，也不是不可以，因为我想区分开这些部分，所以就放在外面了。
<div class="limbs">
<div class="arm left"></div>
<div class="arm right"></div>
<div class="leg left"></div>
<div class="leg right"></div>
<div class="tail"></div>
</div>
.limbs {
position: absolute;
top: 50px;
left: 210px;
width: calc(100% / 1.9);
height: calc(100% / 2);
}
.limbs::before {
content: '';
position: absolute;
bottom: -120px;
width: 100%;
height: 100%;
background: #000;
opacity: .2;
border-radius: 40%;
transform: rotate3d(1, 0, 0, 70deg);
z-index: 0;
}
.arm,
.leg {
position: absolute;
width: 40px;
height: 100px;
background: #fff;
border-radius: 20px;
transform-origin: top center;
z-index: 2;
}
.arm::after,
.leg::after {
content: '';
position: absolute;
bottom: -8px;
right: -50px;
transform: translateX(-50%);
width: 60px;
height: 30px;
background: #fff;
border-radius: 0 50% 4px 4px;
}
.arm.left {
bottom: -20px;
right: 0;
background: #ccc;
animation: arm 1s infinite;
}
.arm.left::after {
right: -50px;
background: #ccc;
}
.arm.right {
bottom: -30px;
right: 10px;
background: #fff;
}
.leg.left {
bottom: -20px;
left: 20px;
background: #ccc;
}
.leg.left::after {
right: -50px;
background: #ccc;
}
.leg.right {
bottom: -30px;
left: 0;
}
/* 尾巴 */
.tail {
position: absolute;
top: 38px;
left: -28px;
width: 40px;
height: 40px;
background: #fff;
border-radius: 50%;
z-index: 1;
}
这里主要分为四肢和尾巴，四肢就是一个圆角矩形，然后给他安一个脚底板，里面的腿加上灰色的背景色，让它看起来更加的立体，然后尾巴就是一个圆形，你看哆啦A梦的小手手都是圆的，我一个尾巴是圆的不过分吧。
背景
上面已经把我们可爱的小熊熊给画出来了，现在我们需要一个背景填充一下，这里我还是使用了渐变，你以为我会自己写？
当然不会，这里推荐一个网站，gradienta，这个网站上有现成已经编辑好的渐变，你只需要选择你想要的渐变，然后复制代码就可以了，我的背景就是从这个上面来的。
我这边的背景分为两个部分，一个是纯背景，还有一个是熊踩着的背景。
代码结构大背景直接放在容器上面就可以了，熊踩着的背景直接定位搞定。
这个代码就不贴了，可以直接上马上掘金看。
效果
效果其实很简单，关键是搭配。
首先奔跑头是不是要上下运动？所以先让头动：
@keyframes head {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(0, 10px);
}
100% {
transform: translate(0, 0);
}
}
没想到只有这么点吧，说了主要是搭配，这里的搭配就是头和身体的运动，头上下运动，身体肯定不能上下运动，身体应该是有一个转体的效果，所以我们让身体旋转：
@keyframes body {
0% {
transform: rotate(0);
}
50% {
transform: rotate(5deg);
}
100% {
transform: rotate(0);
}
}
身体动了尾巴也得跟着动，由于身体是旋转的，所以动画和头部是相反的，而且这里不能使用头部的动画然后反过来，因为头部是下沉，尾巴是上升，所以这里我们需要一个新的动画：
@keyframes tail {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(0, -10px);
}
100% {
transform: translate(0, 0);
}
}
ok，处理完整体的动画，接下来就是四肢的动画了，这里我们需要让四肢的动画和身体的动画同步，所以我们先需要将身体的动画运用到四肢的容器上；
接下来就是四肢，四肢的动画是一个摆动的效果，所以我们需要一个摆动的动画：
@keyframes arm {
0% {
transform: rotate(-10deg) translate(0, 0);
}
50% {
transform: rotate(10deg) translate(0, 10px);
}
100% {
transform: rotate(-10deg) translate(0, 0);
}
}
@keyframes leg {
0% {
transform: rotate(-10deg) translate(0, 0);
}
50% {
transform: rotate(10deg) translate(0, -10px);
}
100% {
transform: rotate(-10deg) translate(0, 0);
}
}
由于前腿和后腿的动画跟头部和尾巴的动画原理一样，所以需要写两套。
现在把效果加上去，完美！
熊是跑起来了，但是背景也要跟着动，所以我们需要给背景加上动画：
@keyframes bg {
0% {
background-position: 0 0;
}
100% {
background-position: 200% 0;
}
}
这里的动画就和奔跑的熊的动画是一样的，只不过我们使用的渐变，而不是图片，这里直接修改背景的位置就可以了。
最后还有一个影子，影子就是缩小，还原，缩小，还原，所以我们需要一个缩小的动画：
@keyframes shadow {
0% {
transform: rotate3d(1, 0, 0, 70deg) scale(1);
}
50% {
transform: rotate3d(1, 0, 0, 70deg) scale(.8);
}
100% {
transform: rotate3d(1, 0, 0, 70deg) scale(1);
}
}
大功告成，来欣赏一下吧！
