如何使用 HTML 和 CSS 创建反射效果？

反射效果是人们可以在他/她的网站中使用的最酷的效果之一。这是一种非正式的效果，因此强烈建议不要在任何专业项目中使用它。您可以在您的个人项目和您的投资组合中使用它来展示您的创造力。在此效果中，我们尝试模仿逼真的反射效果，就像从水中反射一样。

方法：该方法是在原字符串的底部创建一个旋转的字符串，然后改变其不透明度和背景，以使它看起来像原始字符串的反映。让我们来看看上述方法的实现。

HTML 代码：在本节中，“h2”标签是用包裹在其中的文本创建的。

  

    
    
  
    

  

    

        GeeksforGeeks
    

  

CSS 代码：

• 步骤1：应用径向背景，中心较亮，角落较暗。
• 第 2 步：在标题上应用一些基本样式，如大小、颜色等。
• 第 3 步：现在使用 after 选择器并在 X 轴上旋转原始文本，保持原点为底部。
• 第 4 步：应用“webkit”属性将旋转后的文本剪切成切口。它会使上
  文本的一部分可见，如输出图像所示。
• 第 5 步：现在应用透明颜色并降低旋转文本的不透明度。

注意：确保根据您的背景降低不透明度。如果您使用较深的
背景，将不透明度降低 0.1-0.2，如果您使用较浅的背景，则将其降低 0.6-0.8。

完整代码：是以上两段代码的组合。

  
    
    
    
    
  
  
    
GeeksforGeeks
  

输出：