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

web前端开发

共 2646字,需浏览 6分钟

 ·

2020-08-08 04:00

英文 | 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。
完整代码:它是以上两个代码部分的组合。
Text Reflection using HTML and CSS

GeeksforGeeks

最终结果如下:
浏览 28
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报