CSS中的“大白”——CSS 动画

译者注：本文内容为 Baymax in CSS - CSS Animation 的译文

CSS中的“大白”

让咱们用CSS从电影Big Hero 6中建立Baymax角色。

在这篇文章中，咱们将动画一个背景图像，以及一个微妙的动画计时效果，并用一个单独的HTML元素制做一个CSS演示。

你能够在这里全屏看到它。

单个元素

经过使用伪元素，咱们将可以使用一个HTML元素建立面部部分。

<div class="baymax"></div>
复制代码

样式

为了设置舞台，咱们将在屏幕上添加一个微妙的渐变，使其看起来像一个弯曲的白色头。为此，咱们将在body上使用径向渐变。

body {
  background: radial-gradient(circle at center, #fff, #fff 50%, #aaa);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 100vh;
}
复制代码

接下来，咱们将面部定位在页面的中心。嘴是一条简单的黑线，咱们将使用边框建立。

.baymax {
  border-bottom: 1.5em solid #000;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  transform: translate(-50%, -40%);
}
复制代码

第一个属性设置宽度为1.5em的黑色边框。而后使用绝对定位定位线，将其向下推进50％，从左侧向下推进50％。这些50％的值与容器（body）元素的大小有关。

咱们如今遇到的问题是元素如今开始在屏幕的中间和中途开始。它偏离中心。

为了抵消这一点，咱们使用一个变换将元素拉向其宽度的50％，并将其宽度增长40％。

在这个阶段，嘴巴像这样居中：

加眼睛

咱们将利用before和after伪元素为面部添加眼睛。这不须要任何额外的HTML，彻底由CSS处理。

.baymax::before {
  background: #000;
  border-radius: 50%;
  content: "";
  position: absolute;
  width: 12em;
  height: 12em;
  left: -9em;
  top: -6em;
  transform: skewX(-4deg);
}

.baymax::after {
  background: #000;
  border-radius: 50%;
  content: "";
  position: absolute;
  width: 12em;
  height: 12em;
  right: -9em;
  top: -6em;
  transform: skewX(4deg);
}
复制代码

这些伪元素中的每个都具备黑色背景，而且边界半径为50％以使它们成为圆形。每一个都位于嘴的一端，最后有一个skew变换，使它们看起来像是向后倾斜了一点。结果应以下所示：

低电量

电影中有一个有趣的场景，Baymax的电池电量不足。他四处乱窜，眼皮下垂。咱们可使用背景渐变和动画的组合来建立效果。

首先咱们要给背景两种颜色。眼睛部分为黑色，黑色为眼睑，白色为眼睑。首先须要将白色部分放在眼睛外面，而后咱们将其设置为动画，使眼睑下垂。

.baymax::before {
  background: linear-gradient(to bottom, #efefef, #efefef 50%, #000 50%, #000);
  background-position: 0 -100%;
  background-size: 200% 200%;
  ...
}

.baymax::after {
  background: linear-gradient(to bottom, #efefef, #efefef 50%, #000 50%, #000);
  background-position: 0 -100%;
  background-size: 200% 200%;
  ...
}
复制代码

咱们添加了一个背景线性渐变，使其成为容器高度的两倍，而后将其定位，使上半部分位于容器外部。

有了两个背景渐变，咱们能够添加动画keyframes来控制眼睑运动。

@keyframes blink {
  0%, 50% {
    background-position: 0 100%;
  }
  85%, 95% {
    background-position: 0 75%;
  }
  100% {
    background-position: 0 100%;
  }
}
复制代码

动画keyframes是一种使用百分比描述一系列帧的方法。百分比与动画的持续时间有关。因此50％的百分比意味着动画的一半。

经过这种方式，咱们能够将背景设置为直到中途，而后在50％到85％之间，向下移动，而后在动画结束时快速向后移动。

下一步是告诉伪元素使用这些动画关键帧。将animation属性添加到现有样式。

.baymax::before {
  animation: blink 6s infinite;
  ...
}

.baymax::after {
  animation: blink 6s 0.1s infinite;
  ...
}
复制代码

在这里，咱们告诉浏览器在每一个元素上使用blink动画。动画持续时间设置为6秒，并将无限循环。

在第二个例子中有一个额外的属性。6s后的0.1秒告诉浏览器将该动画延迟0.1秒。这会产生第二只眼睛比第一只眼睛稍晚关闭的效果。它增长了疲倦的下垂效果，使它看起来更加人性化。最终结果应以下所示：

你能够在这里全屏看到它。

浏览器

在代码示例中，我省略了任何经常使用的-webkit和-moz前缀。transform和animation属性应该是前缀，我建议使用像Autoprefixer这样的东西。

可共享的gif版本

这是一个动画gif版本，您能够更轻松地在线共享。

（完）

本文做者 Thinker

本文若有错误之处，请留言，我会及时更正

以为对您有帮助的话就点个赞或收藏吧！

欢迎转载或分享，转载时请注明出处

阅读原文