web前端开发
英文 | https://www.geeksforgeeks.org/how-to-create-reflection-effect-using-html-and-css/?ref=rp翻译 | web前端开发
反射效果是可以在网站上使用的最酷的效果之一。这是一种非正式的效果，因此强烈建议不要在任何专业项目中使用它。你可以在个人项目中使用它，也可以在你的作品集中使用它来展示你的创造力。在这种效果下，我们试图模仿逼真的反射效果，就像它被水反射一样。
实现方法：在原始字符串的底部创建一个旋转的字符串，然后更改其不透明度和背景，使其看起来像原始字符串的反射。让我们看一下上述方法的实现。HTML代码：在此部分中，“ h2”标签是用包裹在其中的文本创建的。
CSS代码：<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0" /><title>Text Reflectionusing HTML and CSS</title></head><body><h2 data-text="GeeksforGeeks">GeeksforGeeks</h2></body></html>
- 第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>
