新闻-【开发小技巧】025—如何使用HTML和CSS创建反射效果？

【开发小技巧】025—如何使用HTML和CSS创建反射效果？

2020-08-18 15:56:30　作者: 匿名浏览量：267次

英文 | https://www.geeksforgeeks.org/how-to-create-reflection-effect-using-html-and-css/?ref=rp

反射效果是可以在网站上使用的最酷的效果之一。这是一种非正式的效果，因此强烈建议不要在任何专业项目中使用它。你可以在个人项目中使用它，也可以在你的作品集中使用它来展示你的创造力。

在这种效果下，我们试图模仿逼真的反射效果，就像它被水反射一样。

实现方法：在原始字符串的底部创建一个旋转的字符串，然后更改其不透明度和背景，使其看起来像原始字符串的反射。

让我们看一下上述方法的实现。

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

<!DOCTYPE html> 
<html lang="en">


<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content= 
        "width=device-width,  
        initial-scale=1.0" />


    <title> 
        Text Reflection  
        using HTML and CSS 
    </title> 
</head>


<body> 
    <h2 data-text="GeeksforGeeks"> 
        GeeksforGeeks 
    </h2> 
</body>


</html>

CSS代码：

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

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

<style> 
 body  
     { 
       /* Radiel gradient defined by its center*/
        background-image: radial-gradient(#013220,#008000); 
        height: 100vh; 
      }


      h2 { 
        position: absolute; 
        top: 30%; 
        left: 30%; 
        text-transform: capitalize; 
        color: white; 
        font-size: 50px; 
      } 
      h2::after { 
        content: attr(data-text); 
        position: absolute; 
        top: 0; 
        left: 0; 
    /* Change the position of transformed element */
        transform-origin: bottom; 
    /*  Rotates around x-axis */
        transform: rotateX(180deg); 
        line-height: 0.85em; 
    /* linear-gradient defined by up,down,left ,right ,diagonal */
        background-image: linear-gradient(0deg, #ffffff 0, transparent 95%); 
        -webkit-background-clip: text; 
        color: transparent;          
        opacity: 0.7; 
      } 
</style>

完整代码：它是以上两个代码部分的组合。

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Text Reflection using HTML and CSS</title> 
    <style> 
      body  
     { 
       /* Radiel gradient defined by its center*/ 
        background-image: radial-gradient(#013220,#008000); 
        height: 100vh; 
      }


      h2 { 
        position: absolute; 
        top: 30%; 
        left: 30%; 
        text-transform: capitalize; 
        color: white; 
        font-size: 50px; 
      } 
      h2::after { 
        content: attr(data-text); 
        position: absolute; 
        top: 0; 
        left: 0; 
    /* Change the position of transformed element */ 
        transform-origin: bottom; 
    /*  Rotates around x-axis */ 
        transform: rotateX(180deg); 
        line-height: 0.85em; 
    /* linear-gradient defined by up,down,left ,right ,diagonal */ 
        background-image: linear-gradient(0deg, #ffffff 0, transparent 95%); 
        -webkit-background-clip: text; 
        color: transparent;          
        opacity: 0.7; 
      } 
</style> 
  </head> 
  <body> 
    <h2 data-text="GeeksforGeeks">GeeksforGeeks</h2> 
  </body> 
</html>

最终结果如下：

0 +1
0 +1
0 +1

【开发小技巧】025—如何使用HTML和CSS创建反射效果？

2020-08-18 15:56:30 作者: 匿名 浏览量：267次

相关新闻

2020-08-18 15:56:30　作者: 匿名浏览量：267次