【开发小技巧】025—如何使用HTML和CSS创建反射效果?
<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>
第1步:应用径向背景,该背景的中心较亮而拐角较暗。 步骤2:对标题应用一些基本样式,例如大小,颜色等。 步骤3:现在,使用after 选择器并在X轴上旋转原始文本,并保持原点为底部。 第4步:应用“ webkit”属性将旋转后的文本剪切为剪切。它将使
文本的上部可见,如输出图像中所示。步骤5:现在应用透明颜色并降低旋转文本的不透明度。
背景,请将不透明度降低0.1-0.2;如果使用较浅的背景,则将其降低0.6-0.8。
Text Reflection using HTML and CSS
GeeksforGeeks
评论