Let’s not get deeper into that now. Just keep in mind that we can use background-color to change the color of the mask. If you are familiar with different ways of using background-color, we can also use gradients and write a simple gradient which fills red in the center and radially spreads into black outwards. The code for that is the following:

现在让我们不深入讨论。 请记住&＃xff0c;我们可以使用background-color更改蒙版的颜色。 如果您熟悉使用background-color不同方式&＃xff0c;我们还可以使用渐变并编写一个简单的渐变&＃xff0c;该渐变在中心填充红色&＃xff0c;并在径向向外扩展为黑色。 相应的代码如下&＃xff1a;

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

Which results in this:

结果如下&＃xff1a;

添加动画 (Adding the animation)

Now let’s add some animation to this empty face. For this I have expression.svg which looks like the below image. For simplicity, I have created all the svgs with the same width and height, so that we avoid aligning the face and expression manually.

现在&＃xff0c;让我们向该空面Kong添加一些动画。 为此&＃xff0c;我有expression.svg &＃xff0c;如下图所示。 为简单起见&＃xff0c;我创建了所有具有相同宽度和高度的svg&＃xff0c;以便避免手动对齐面部和表情。

Now mask-image has this cool option which allows multiple images to be used as masks. So we can do this: mask-image: url(face.svg), url(expression.svg);. This is what we have now:

现在mask-image有了这个很酷的选项&＃xff0c;可以将多个图像用作遮罩。 这样我们就可以做到&＃xff1a; mask-image: url(face.svg), url(expression.svg); 。 这就是我们现在所拥有的&＃xff1a;

One of the most important properties of CSS masks is mask-position, which positions the mask from the top left corner relative to its parent. And I can position multiple masks using the property mask-position just like mask-image.

CSS遮罩的最重要属性之一是mask-position &＃xff0c;它相对于其父遮罩从左上角定位遮罩。 而且我可以使用属性mask-position来放置多个遮罩&＃xff0c;就像mask-image 。

So to make the face sad, we can use something like this: mask-position: 0 0, 0 12px;. And the result is this:

因此&＃xff0c;要使脸部悲伤&＃xff0c;我们可以使用类似这样的方法&＃xff1a; mask-position: 0 0, 0 12px; 。 结果是这样的&＃xff1a;

The first position 0 0 is for the face.svg, and the second 0 12px is for expression.svg. This pushes it 12px from above and results in the above expression.

第一个位置0 0用于face.svg &＃xff0c;第二个0 12px用于expression.svg 。 这会将其从上方推12px &＃xff0c;并产生以上表达式。

应用功能 (Applying functionality)

Now let’s animate these expressions on hover. So the complete code we get after applying the hover pseudo class is the following:

现在让我们在悬停时为这些表达式设置动画。 因此&＃xff0c;在应用悬停伪类后获得的完整代码如下&＃xff1a;

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(&＃39;face.svg&＃39;), url(&＃39;expression.svg&＃39;); 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;}

After playing with the CSS a bit more, we can do this:

在使用CSS多一点之后&＃xff0c;我们可以执行以下操作&＃xff1a;

This is one of the methods we can use to build those gripping animations we come across almost daily.

这是我们几乎每天都可以用来制作那些令人抓狂的动画的方法之一。

重要说明 (One Important Note)

The masking properties might not work across all the browsers. So to make them work in all the browsers, just prepend browser specific labels like -webkit- , -moz- & -0- .

屏蔽属性可能不适用于所有浏览器。 因此&＃xff0c;要使其在所有浏览器中都能正常工作&＃xff0c;只需在浏览器特定的标签前加上-webkit- &＃xff0c;- -moz-和-0- 。

You can look at the complete code here on github and codepen.

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

Thanks for reading! I hope you learned something.

谢谢阅读&＃xff01; 我希望你学到了一些东西。

翻译自: https://www.freecodecamp.org/news/how-i-built-a-mood-changing-animation-using-css-masks-565b16ed051f/

css 蒙版