阅读 2716

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%。

在这个阶段,嘴巴像这样居中:

加眼睛

我们将利用beforeafter伪元素为面部添加眼睛。这不需要任何额外的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前缀。transformanimation属性应该是前缀,我建议使用像Autoprefixer这样的东西。

可共享的gif版本

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

(完)

本文作者 Thinker

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

觉得对您有帮助的话就点个赞收藏吧!

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

阅读原文

关注下面的标签,发现更多相似文章
评论