极客笔记使用HTML和CSS创建3D文本效果
在网页设计领域中，3D文本效果是最受欢迎的文本效果之一。作为设计师或前端开发人员，你应该能够构建一个3D文本效果。今天，我们将介绍一种最简单和直接的方法来呈现3D外观的文本。
text-shadow属性是赋予3D文本运动效果的设计元素。应用多个text-shadow的目的是给单词赋予3D外观，因为如果我们仅仅应用一个（或单位）text-shadow，那么所有字母的效果将是相同的。然而，为了创建3D效果，我们需要为每个字母和角度（基本上是X和Y坐标和模糊半径）设定不同的阴影厚度。
让我们深入了解如何使用HTML和CSS来创建3D文本效果。
使用text-shadow属性
正如其名称所示，这个CSS属性给文本添加阴影。它接受以逗号分隔的应用于文本的阴影列表。它的默认设置是none。它为元素的文本内容应用一个或多个text-shadow效果。
语法
以下是CSS text-shadow属性的语法。
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
现在，让我们看一下使用HTML和CSS创建3D文字效果的下面的示例，以获取更多的想法。
示例
让我们看看下面的例子，我们将对文本添加简单的3D效果。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #D1F2EB;
}
h1 {
margin: 250px auto;
text-align: center;
color: #17202A;
font-size: 60px;
transition: 1.0s;
font-family: verdana;
}
h1:hover {
text-shadow: 0 1px 0 #17202A, 0 2px 0 #17202A,
0 7px 0 #17202A, 0 8px 0 #17202A,
0 11px 0 #17202A, 0 12px 0 #17202A;
}
</style>
</head>
<body>
<h1>Tutorialspoint</h1>
</body>
</html>
运行上述代码后，输出窗口将弹出，在网页中心显示应用了背景的文字。当用户尝试将鼠标悬停在文字上时，它会获得悬停效果并显示3D文字。
示例
考虑以下示例，我们将在网页上实现3D跑马灯效果。
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
display: flex;
}
.tutorial .inner {
width: 300px;
height: 220px;
line-height: 240px;
font-size: 100px;
font-family: verdana;
white-space: nowrap;
overflow: hidden;
}
.tutorial .inner:first-child {
background-color: #ABEBC6;
color: #6C3483;
transform-origin: right;
transform: perspective(110px) rotateY(-16deg);
}
.tutorial .inner:last-child {
background-color: #D7DBDD;
color: #1E8449;
transform-origin: left;
transform: perspective(50px) rotateY(16deg);
}
.tutorial .inner span {
position: absolute;
animation: marquee 5s linear infinite;
}
.tutorial .inner:first-child span {
animation-delay: 1.5s;
left: -100%;
}
@keyframes marquee {
from {
left: 100%;
}
to {
left: -100%;
}
}
</style>
</head>
<body>
<div class="tutorial">
<div class="inner">
<span>T P</span>
</div>
<div class="inner">
<span>Tutorials</span>
</div>
</div>
</body>
</html>
当代码被执行时，将生成一个由3D闪烁效果组成的在网页上显示的输出。
示例
接下来我们将在网页上制作发光的3D效果。
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
animation: glow 10s ease-in-out infinite;
}
figure {
animation: wobble 5s ease-in-out infinite;
transform-origin: center center;
transform-style: preserve-3d;
}
@keyframes wobble {
0%,
100% {
transform: rotate3d(2, 2, 0, 45deg);
}
25% {
transform: rotate3d(-3, 3, 0, 50deg);
}
50% {
transform: rotate3d(-2, -4, 0, 42deg);
}
}
h1 {
width: 100%;
padding: 42px;
font: 100px 'Concert One', verdana;
text-transform: uppercase;
position: absolute;
color: #1E8449;
}
@keyframes glow {
0%,
100% {
text-shadow: 0 0 40px #7D3C98;
}
25% {
text-shadow: 0 0 45px #DFFF00;
}
50% {
text-shadow: 0 0 50px #DE3163;
}
75% {
text-shadow: 0 0 55px #40E0D0;
}
}
</style>
</head>
<body>
<figure>
<h1>WELCOME</h1>
</figure>
</body>
</html>
在运行上述程序时，输出窗口将弹出，显示网页上的3D文本，并为文本添加了发光效果。