这部动画是我们非常熟悉的。当我们使用 Facebook 时,会有一个名为 WOW 的反应。因此,在本文中,我们通过使用简单的 HTML 和 CSS 做出了这种反应。此外,它是学习伪元素概念的最佳示例之一。
-
HTML部分:通过使用HTML,我们将创建一些类,因为我们可以将div修改为一张脸。我们将使用一些 div 和类来使用 CSS 修改该部分。主要思想是我们将采取身体部位的一些区域并通过CSS对其进行修改。
这是身体部分:
-
CSS代码:通过使用CSS,我们将面部眉毛和嘴巴。首先,我们将区域修改为圆形。制作脸部后,我们将通过使用 CSS 悬停效果(如 @keyeffect)赋予其活力,这将有助于沿 X 轴或 Y 轴的特定角度移动眉毛和嘴巴。
示例:这是完整的代码
Wow Facebook Reaction 输出:
方法:这个动画的基础来自于一些 CSS 属性和 HTML 标签。在这里,我们将制作一张看起来像哇的脸。