还记得我们小时候看过的动画片吗？ 当时它们是动画的拟人化。 现在，动画不仅是卡通，我们几乎每天都会见到动画，检查手机或使用任何带有屏幕的设备。
如今，动画不仅用于吸引人们的注意力，而且还用于改善用户交互，促进导航。 在任何好的设计中，动画的添加方式都应使其与整体概念相结合，从而创建方便的用户界面。
在本文中，我们将使用不同的表情创建一个简单的面部动画，并且在此过程中，我们将学习一些关于CSS的知识。
让我们开始吧
我们将使用CSS技术，该技术在Web开发人员中很少使用，但设计人员通常会采用。 这称为遮罩。
当您听到“面具”一词时会想到什么？ 您可能想像过一些使本质模糊的东西。 这就是我们需要知道的。
等等-但是本文是关于编写和使用CSS动画的……不要惊慌！ 好吧！
创建一个基本遮罩
假设我们有一个带有
background: green;的
div标签
background: green; 它看起来像这样：
还有一个
face.svg文件：
如果我们应用CSS属性
mask-image: url (face.svg); 到
div标签，那么您会惊讶地看到结果：
您可能会认为这很奇怪。 face.svg图像放置在
div顶部，但具有背景色。 这违反了我们的预期。 发生这种情况是因为
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 。 为简单起见，我创建了所有宽度和高度均相同的svg文件，因此无需手动对齐面部和表情。
现在
mask-image有一个很酷的选项，允许您将多个图像用作遮罩。 因此，我们可以这样做：
mask-image: url (face.svg), url (expression.svg); 。 这是发生了什么：
CSS遮罩的最重要属性之一是
mask-position ，这是因为该遮罩位于相对于父元素的左上角。 而且我可以像
mask-image一样使用
mask-position属性来安排几个遮罩。 要使脸部悲伤，请使用类似以下的内容：
mask-position: 0 0, 0 12px; 。 这是发生了什么事。
face.svg的第一个位置为
0 0 ，
face.svg的第二个位置为
0 12px 。 这导致了12px的转移，并给了脸部必要的表情。
应用功能
现在让我们在悬停时为这些表达式设置动画。 应用悬停伪类后获得的完整代码将如下所示：
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; 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; transition: mask-position .1s linear; }
在使用CSS属性后，我们可以执行以下操作：
这是您可以用来创建几乎每天都会遇到的令人兴奋的动画的方法之一。
重要一点
屏蔽可能不适用于所有浏览器。 要使其在所有浏览器中都能正常工作，只需添加特殊的浏览器标签，例如
-webkit- ，-
-moz-和
-0- 。
您可以在
github和
codepen上看到完整的代码。 谢谢你 希望对您有所帮助。
看看VPS.today ，这是一个查找虚拟服务器的站点。 来自130个托管商的1500关税，便捷的界面和大量用于寻找最佳虚拟服务器的条件。