html底部代码_【开发小技巧】025—如何使用HTML和CSS创建反射效果？

最新推荐文章于 2022-05-25 08:45:01 发布

weixin_39667452

最新推荐文章于 2022-05-25 08:45:01 发布

阅读量75

点赞数

文章标签： html底部代码 html旋转 html旋转代码 html透明度

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

 <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。

 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;       }

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

                 Text Reflection using HTML and CSS          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;       }

`GeeksforGeeks`

最终结果如下：

weixin_39667452

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html底部代码_【开发小技巧】025—如何使用HTML和CSS创建反射效果？

英文 |https://www.geeksforgeeks.org/how-to-create-reflection-effect-using-html-and-css/?ref=rp翻译 | web前端开发反射效果是可以在网站上使用的最酷的效果之一。这是一种非正式的效果，因此强烈建议不要在任何专业项目中使用它。你可以在个人项目中使用它，也可以在你的作品集中使用它来展示你的创造力。在这...
复制链接

扫一扫

html底部代码_【开发小技巧】025—如何使用HTML和CSS创建反射效果？

GeeksforGeeks

“相关推荐”对你有帮助么？

`GeeksforGeeks`