Thinker | Make a Thinker!
2019-03-28 | UNLOCK

大白

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

CSS中的“大白”

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

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

1

你可以在这里全屏看到它。

单个元素

通过使用伪元素，我们将能够使用一个HTML元素创建面部部分。

1
<div class="baymax"></div>

样式

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

1
2
3
4
5
6
body {
  background: radial-gradient(circle at center, #fff, #fff 50%, #aaa);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 100vh;
}

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

1
2
3
4
5
6
7
8
.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％。

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

2

加眼睛

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.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变换，使它们看起来像是向后倾斜了一点。结果应如下所示：

2

低电量

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.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来控制眼睑运动。

1
2
3
4
5
6
7
8
9
10
11
@keyframes blink {
  0%, 50% {
    background-position: 0 100%;
  }
  85%, 95% {
    background-position: 0 75%;
  }
  100% {
    background-position: 0 100%;
  }
}

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

通过这种方式，我们可以将背景设置为直到中途，然后在50％到85％之间，向下移动，然后在动画结束时快速向后移动。

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

1
2
3
4
5
6
7
8
9
.baymax::before {
  animation: blink 6s infinite;
  ...
}

.baymax::after {
  animation: blink 6s 0.1s infinite;
  ...
}

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

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

4

你可以在这里全屏看到它。

浏览器

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

可共享的gif版本

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

5

（完）

css

评论加载中