📌  相关文章
📜  如何使用 HTML 和 CSS 创建反射效果?

📅  最后修改于: 2021-11-03 06:36:43             🧑  作者: Mango

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

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

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



  

    
    
  
    
        Text Reflection 
        using HTML and CSS
    

  

    

        GeeksforGeeks     

  

CSS 代码:

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

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


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



  
    
    
    Text Reflection using HTML and CSS
    
  
  
    

GeeksforGeeks

  

输出: