如何使用CSS蒙版构建一个动画的表情

2019-08-07

加入收藏

还记得我们童年时期曾经看过的漫画吗？那时他们是动画的缩影。如今，动画不仅限于漫画 - 当我们查看手机或查看任何有屏幕的设备时，我们几乎每天都会看到动画。

如今，动画不仅用于吸引注意力，还用于增强用户体验并引导用户流动。在任何好的设计中，动画都以这样的方式添加，即它们与通用流混合，从而创建无缝的用户体验。

因此，在本文中，我们将构建一个具有不同表达式的面部的简单动画，我们将在该过程中学习一点css。

入门

我们将使用CSS技术，这在Web开发人员中很少见，但设计人员经常使用。它被称为蒙版。

那么当你听到“蒙版”时，你会想到什么？

你可能想象一下封面上的东西。这就是我们需要了解的全部内容。

等等 - 但这篇文章与编码和使用CSS动画有关...

别担心！我们会做对的。

创建基本掩码

假设我们有一个 <div>，background: green;它看起来像这样：

现在，说我有一个face.svg：

如果我们mask-image: url(face.svg);在其上应用CSS属性<div>，您会惊讶地看到我们得到的内容：

你可能会认为这里的事情很奇怪。将face.svg被放置在<div>，但它占去了的颜色background。这与您的预期相反。发生这种情况是因为mask-type使svg的不透明部分透明的属性。这允许背景颜色可见。

我们现在不要深入研究。请记住，我们可以background-color用来改变面具的颜色。如果您熟悉不同的使用方法background-color，我们也可以使用渐变并编写一个简单的渐变，在中心填充红色并径向向外扩展为黑色。代码如下：

background-image: -webkit-radial-gradient( hsla(0, 100%, 50%, .7), hsla(0, 100%, 20%, .8), hsla(0, 100%, 10%, 1));

结果如下：

添加动画

现在让我们为这张空脸添加一些动画。为此，我expression.svg看起来像下面的图像。为简单起见，我创建了具有相同宽度和高度的所有svgs，以便我们避免手动对齐面和表达式。

image.png

现在mask-image有了这个很酷的选项，允许多个图像用作蒙版。所以我们可以这样做：mask-image: url(face.svg), url(expression.svg);。这就是我们现在拥有的：

image.png

CSS蒙版最重要的属性之一是mask-position将蒙版从左上角相对于其父对象定位。我可以使用属性定位多个口罩mask-position只是喜欢mask-image。

所以为了让脸色难过，我们可以使用这样的东西：mask-position: 0 0, 0 12px;。结果如下：

所述第一位置0 0是为face.svg，第二0 12px对expression.svg。这将它从上方推出12px并导致上述表达式。

应用功能

现在让我们在悬停时动画这些表达式。因此，应用hover伪类后得到的完整代码如下：

i {
 background-image: -webkit-radial-gradient(hsla(0, 100%, 50%, .7), hsla(0, 100%, 20%, .8) 60%, hsla(0, 100%, 10%, 1));
 
 mask-image: url('face.svg'), url('expression.svg');
 mask-position: 0 0, 0 12px; /* To make the sad expression */
 transition: mask-position .5s ease-out;
}
i:hover {
 background-image: -webkit-radial-gradient(hsla(120, 100%, 50%, .7), hsla(120, 100%, 20%, .8) 60%, hsla(120, 100%, 10%, 1));
 mask-position: 0 0, 0 0; /* To make the hAppy expression */
 transition: mask-position .1s linear;
}

在使用CSS之后，我们可以这样做：

这是我们可以用来构建我们几乎每天遇到的那些扣人心弦的动画的方法之一。

一个重要的说明

屏蔽属性可能无法在所有浏览器中使用。因此，为了使他们在所有的浏览器，只是在前面加上特定浏览器标签一样工作-webkit- ，-moz-及-0- 。

您可以在github和codepen上查看完整的代码。

谢谢阅读！我希望你学到了一些东西。

译自：https://medium.com/free-code-camp/how-i-built-a-mood-changing-animation-using-css-masks-565b16ed051f