css3绘制能行走的大象

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第2天，点击查看活动详情”

HTML

我们先捋清楚大象的身体结构鼻子、象牙、眼睛、耳朵、头部、躯干、四肢和尾巴，按照这几个部位去把html结构弄出来，那么我们大体就得出以下的结构

    <div class="eleBox"> 
        <!-- 整体 -->
      <div class="ele-wrapper">
        <!-- 头部：眼睛、鼻子、耳朵、象牙等 -->
          <div class="ele-body">
              <div class="ele-head">
                  <div class="ele-eyebrows"></div>
                  <div class="ele-eyes"></div>
                  <div class="ele-nose"></div>
                  <div class="ele-ivory-1"></div>
                  <div class="ele-ivory-2"></div>
                  <div class="ele-ears"></div>
              </div>
          </div>
          <!-- 四肢 -->
          <div class="ele-leg-1 ele-leg-back">
              <div class="ele-foot"></div>
          </div>
          <div class="ele-leg-2 ele-leg-front">
              <div class="ele-foot"></div>
          </div>
          <div class="ele-leg-3 ele-leg-back">
              <div class="ele-foot"></div>
          </div>
          <div class="ele-leg-4 ele-leg-front">
              <div class="ele-foot"></div>
          </div>
          <!-- 尾巴 -->
          <div class="ele-tail"></div>
      </div>
  </div>

大象的整体结构出来的，接下来我们写css调式样式

头部和躯干样式

.ele-body {
  background: -webkit-linear-gradient(top, #cfcfcf 0%, #9c9c9c 70%);
  background: linear-gradient(to bottom, #cfcfcf 0%, #9c9c9c 70%);
  border: 1px solid #808080;
  border-radius: 50px 25px 35px 30px;
  height: 5px;
  position: relative;
  width: 100%;
  z-index: 1;
  -webkit-border-radius: 50px 25px 35px 30px;
  -moz-border-radius: 50px 25px 35px 30px;
  -ms-border-radius: 50px 25px 35px 30px;
  -o-border-radius: 50px 25px 35px 30px;
}
.ele-head {
  background: #c2c2c2;
  border-radius: 50%;
  border-top: 1px solid #808080;
  box-shadow: -1px 1px 2px #808080;
  height: 75px;
  width: 80px;
  position: absolute;
}

颜色就用比较逼真的浅灰色渐变色，绘制出来以下效果

继续绘制眼睛、鼻子、象牙等

.ele-eyes:before,
.ele-eyes:after {
  background-color: #fdfdfd;
  border-radius: 50%;
  bottom: -24px;
  content: '';
  height: 5px;
  position: absolute;
  width: 5px;
}

.ele-eyebrows {
  background: -webkit-linear-gradient(bottom, #c2c2c2 20%, #9c9c9c 100%);
  background: linear-gradient(to top, #c2c2c2 20%, #9c9c9c 100%);
  border-radius: 5px;
  border-top: 1px solid #808080;
  bottom: 44px;
  height: 11px;
  left: 46px;
  position: absolute;
  width: 30px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.ele-eyes {
  left: 60%;
  position: absolute;
  top: 6%;
}
.ele-eyes:before {
  left: 20px;
}
.ele-eyes:after {
  left: 5px;
}

.ele-ears {
  background: -webkit-linear-gradient(right, #c2c2c2 10%, #a9a9a9 100%);
  background: linear-gradient(to left, #c2c2c2 10%, #a9a9a9 100%);
  border-bottom: 1px solid #808080;
  border-left: 1px solid #808080;
  border-top: 1px solid #808080;
  border-radius: 60px 0 0 50%;
  height: 50px;
  left: -10px;
  position: absolute;
  top: 15px;
  -webkit-transform: rotateZ(-25deg);
  transform: rotateZ(-25deg);
  width: 45px;
}

.ele-nose {
  background: -webkit-linear-gradient(top, #c2c2c2 50%, #a9a9a9 100%);
  background: linear-gradient(to bottom, #c2c2c2 50%, #a9a9a9 100%);
  border-radius: 0px 100% 0px 0px;
  border-top: 2px solid #808080;
  height: 80px;
  left: 83%;
  position: absolute;
  top: 35%;
  width: 15px;
}
.ele-nose:before {
  background-color: #a9a9a9;
  border-bottom: 1px solid #808080;
  border-left: 1px solid #808080;
  border-radius: 4px;
  bottom: 0;
  content: '';
  height: 7px;
  left: -2px;
  position: absolute;
  width: 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

.ele-ivory-1,
.ele-ivory-2 {
  border-bottom: 6px solid #fff;
  border-radius: 50%;
  height: 20px;
  position: absolute;
  -webkit-transform: rotateZ(20deg);
  transform: rotateZ(20deg);
  width: 25px;
}

.ele-ivory-1 {
  box-shadow: 0px 1px 0px #808080;
  left: 50px;
  top: 50px;
}
.ele-ivory-1:before {
  background-color: #c2c2c2;
  bottom: -5px;
  content: '';
  height: 22px;
  left: -2px;
  position: absolute;
  width: 7px;
}
.ele-ivory-1:after {
  background-color: #c2c2c2;
  border-radius: 0 50% 50% 0;
  bottom: -7px;
  box-shadow: 1px 1px 0px #808080;
  content: '';
  height: 10px;
  left: 3px;
  position: absolute;
  -webkit-transform: rotateZ(20deg);
  transform: rotateZ(20deg);
  width: 7px;
}

.ele-ivory-2 {
  border-bottom-color: #e6e6e6;
  left: 60px;
  top: 47px;
  z-index: -1;
}
.ele-ivory-2:before {
  background-color: #c2c2c2;
  bottom: -5px;
  content: '';
  height: 12px;
  position: absolute;
  width: 15px;
}

得到以下效果

看上去越来越有感觉了，接下来绘制四肢和尾巴

四肢和尾巴

div[class^='ele-leg-'] {
  border-left: 1px solid #808080;
  height: 44px;
  position: absolute;
  width: 25px;
}
div[class^='ele-leg-']:before {
  background-color: rgba(74, 74, 74, 0.53);
  border-radius: 50%;
  bottom: -15px;
  box-shadow: 0 0 2px rgba(74, 74, 74, 0.53);
  content: '';
  height: 5px;
  left: 50%;
  position: absolute;
  -webkit-transform: translateX(-50%) rotateZ(0deg);
  transform: translateX(-50%) rotateZ(0deg);
  width: 25px;
}

.ele-leg-front {
  background-color: #9c9c9c;
  top: 100%;
  z-index: 1;
}
.ele-leg-front .ele-foot {
  background-color: #9c9c9c;
}

.ele-leg-back {
  background-color: #828282;
  top: 95%;
}
.ele-leg-back .ele-foot {
  background-color: #828282;
}
.ele-leg-back .ele-foot:before,
.ele-leg-back .ele-foot:after {
  background-color: #bababa;
}

.ele-leg-1 {
  right: 57.5%;
}

.ele-leg-2 {
  right: 67.5%;
}

.ele-leg-3 {
  right: 5%;
}

.ele-leg-4 {
  right: 15%;
}

.ele-foot:before,
.ele-foot:after {
  background-color: #e0e0e0;
  border-radius: 5px 5px 0 0;
  bottom: 0;
  content: '';
  height: 15px;
  position: absolute;
  width: 11px;
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -ms-border-radius: 5px 5px 0 0;
  -o-border-radius: 5px 5px 0 0;
}

.ele-foot {
  border-radius: 12px 12px 35% 40%;
  bottom: -10px;
  box-shadow: -1px 1px 0px #808080;
  height: 15px;
  left: 50%;
  overflow: hidden;
  position: absolute;
  -webkit-transform: translateX(-49%);
  transform: translateX(-49%);
  width: 27px;
  -webkit-border-radius: 12px 12px 35% 40%;
  -moz-border-radius: 12px 12px 35% 40%;
  -ms-border-radius: 12px 12px 35% 40%;
  -o-border-radius: 12px 12px 35% 40%;
  -moz-transform: translateX(-49%);
  -ms-transform: translateX(-49%);
  -o-transform: translateX(-49%);
}
.ele-foot:before {
  right: -3px;
}
.ele-foot:after {
  bottom: -1px;
  right: 2px;
}

这样大象的整体样子就出来了，css我觉得大家都能看懂，我就不一一讲解了

大象形状出来之后，我们怎样让他动起来呢？这里我们就要用到animation动画属性了，而animation有一个cubic-bezier，没错就是贝塞尔曲线，让整个大象动起来，看上去更加流畅自然，对cubic-bezier不熟悉的同学可以查一下资料，总之调试起来比较麻烦。

让大象动起来

大象画出来了，那么接下来就让它行走起来，做一个更加逼真的样子。

css3中添加的新属性animation是用来为元素实现动画效果的，但是animation无法单独担当起实现动画的效果。承载动画的另一个属性——@keyframes。使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

通过 @keyframes 规则创建动画。

@keyframes定义一个动画，并定义具体的动画效果，比如是放大还是位移等等。

@keyframes 它定义的动画并不直接执行，需要借助animation来运转。

结尾

由于动画比较多，我就不把代码贴出来了，直接放到了码上掘金，有兴趣的同学可以拿下来看看。

css不难，但是比较麻烦，需要有耐心去调试样式。

干前端就要有耐心。

—— END ——