📜  使用 HTML 和 CSS 的 Facebook WOW 表情符号

📅  最后修改于: 2021-10-29 03:45:49             🧑  作者: Mango

这部动画是我们非常熟悉的。当我们使用 Facebook 时,会有一个名为 WOW 的反应。因此,在本文中,我们通过使用简单的 HTML 和 CSS 做出了这种反应。此外,它是学习伪元素概念的最佳示例之一。

    方法:这个动画的基础来自于一些 CSS 属性和 HTML 标签。在这里,我们将制作一张看起来像哇的脸。

  • HTML部分:通过使用HTML,我们将创建一些类,因为我们可以将div修改为一张脸。我们将使用一些 div 和类来使用 CSS 修改该部分。主要思想是我们将采取身体部位的一些区域并通过CSS对其进行修改。

    这是身体部分:

        
            
                
                
                
            
        
  • CSS代码:通过使用CSS,我们将面部眉毛和嘴巴。首先,我们将区域修改为圆形。制作脸部后,我们将通过使用 CSS 悬停效果(如 @keyeffect)赋予其活力,这将有助于沿 X 轴或 Y 轴的特定角度移动眉毛和嘴巴。

    示例:这是完整的代码

    
    
        
            
            Wow Facebook Reaction
            
        
        
            
            
                
                    
                        
                        
                        
                    
                
            
        

    输出: