HTML CSS 反射效果
反射效果是可以在网站上使用的最酷的效果之一。这是一种非正式的效果，因此强烈建议不要在任何专业项目中使用它。可以在个人项目中使用它。在这种效果下，模仿逼真的反射效果，就像水中的倒影一样。
实现方法：在原始字符串的底部创建一个旋转的字符串，然后更改其不透明度和背景，使其看起来像原始字符串的反射。

HTML代码

  1. <!DOCTYPE html> 
  2. <html lang="en">
  4. <head> 
  5.     <meta charset="UTF-8" /> 
  6.     <meta name="viewport" content= 
  7.         "width=device-width,  
  8.         initial-scale=1.0" />
  10.     <title> 
  11.         Text Reflection  
  12.         using HTML and CSS 
  13.     </title> 
  14. </head>
  16. <body> 
  17.     <h2 data-text="GeeksforGeeks"> 
  18.         GeeksforGeeks 
  19.     </h2> 
  20. </body>
  22. </html>

CSS代码

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

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

  1. <style> 
  2.  body  
  3.      { 
  4.        /* Radiel gradient defined by its center*/
  5.         background-image: radial-gradient(#013220,#008000); 
  6.         height: 100vh; 
  7.       }
  9.       h2 { 
  10.         position: absolute; 
  11.         top: 30%; 
  12.         left: 30%; 
  13.         text-transform: capitalize; 
  14.         color: white; 
  15.         font-size: 50px; 
  16.       } 
  17.       h2::after { 
  18.         content: attr(data-text); 
  19.         position: absolute; 
  20.         top: 0; 
  21.         left: 0; 
  22.     /* Change the position of transformed element */
  23.         transform-origin: bottom; 
  24.     /*  Rotates around x-axis */
  25.         transform: rotateX(180deg); 
  26.         line-height: 0.85em; 
  27.     /* linear-gradient defined by up,down,left ,right ,diagonal */
  28.         background-image: linear-gradient(0deg, #ffffff 0, transparent 95%); 
  29.         -webkit-background-clip: text; 
  30.         color: transparent;          
  31.         opacity: 0.7; 
  32.       } 
  33. </style>

完整的代码

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3.   <head> 
  4.     <meta charset="UTF-8" /> 
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  6.     <title>Text Reflection using HTML and CSS</title> 
  7.     <style> 
  8.       body  
  9.      { 
  10.        /* Radiel gradient defined by its center*/ 
  11.         background-image: radial-gradient(#013220,#008000); 
  12.         height: 100vh; 
  13.       }
  15.       h2 { 
  16.         position: absolute; 
  17.         top: 30%; 
  18.         left: 30%; 
  19.         text-transform: capitalize; 
  20.         color: white; 
  21.         font-size: 50px; 
  22.       } 
  23.       h2::after { 
  24.         content: attr(data-text); 
  25.         position: absolute; 
  26.         top: 0; 
  27.         left: 0; 
  28.     /* Change the position of transformed element */ 
  29.         transform-origin: bottom; 
  30.     /*  Rotates around x-axis */ 
  31.         transform: rotateX(180deg); 
  32.         line-height: 0.85em; 
  33.     /* linear-gradient defined by up,down,left ,right ,diagonal */ 
  34.         background-image: linear-gradient(0deg, #ffffff 0, transparent 95%); 
  35.         -webkit-background-clip: text; 
  36.         color: transparent;          
  37.         opacity: 0.7; 
  38.       } 
  39. </style> 
  40.   </head> 
  41.   <body> 
  42.     <h2 data-text="GeeksforGeeks">GeeksforGeeks</h2> 
  43.   </body> 
  44. </html>

实现效果

image.png