添加 CSS
- 通过将显示设置为其默认的“内联”值并将位置设置为“相对”来开始设置 <h1> 元素的样式。
- 在 <h1> 元素上指定字体、字母间距和颜色属性。
- 添加 CSS ::after 伪元素并放置 content 属性，该属性与 ::after 伪元素一起使用以其中生成内容。
- 将位置设置为“绝对”，指定左侧和顶部属性并添加颜色。
我们赋予红色 50% 的不透明度，以使底层颜色呈现低谷。
h1 {
display: inline;
position: relative;
font: 150px Optima, serif;
letter-spacing: -5px;
color: rgba(150, 0, 255, 0.5);
}
h1:after {
content: "Welcome";
position: absolute;
left: 10px;
top: 5px;
color: rgba(255, 0, 100, 0.5);
}
让我们将所有部分放在一起并尝试一些示例。
使用“rgba”颜色创建立体文字效果的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
h1 {
display: inline;
position: relative;
font: 150px Optima, serif;
letter-spacing: -5px;
color: rgba(150, 0, 255, 0.5);
}
h1:after {
content: "Welcome";
position: absolute;
left: 10px;
top: 5px;
color: rgba(255, 0, 100, 0.5);
}
</style>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>
如果我们不需要此效果，尤其是与 3D 眼镜一起使用时，我们可以更改其颜色并仅使用样式。
创建立体文字效果的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
h1 {
display: inline;
position: relative;
font: 150px Garamond, serif;
letter-spacing: -5px;
color: #FFFFF0;
}
h1:after {
content: "Welcome";
position: absolute;
left: 10px;
top: 5px;
color: #FF69B4;
}
</style>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>
创建 HTML
- 首先，我们需要将文本放在 HTML <h1> 标签中。
<h1>Welcome</h1>
立体 是 3D 效果，它包含两个不同过滤的彩色图像，每只眼睛一个，通过 3D 眼镜完全可见。
但是，即使不戴眼镜，这些效果看起来也很酷且富有创意，我们可以使用它来使更具吸引力。
让我们一起尝试创建一个。
日期：2020-06-02 22:15:03 来源：oir作者：oir