数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究使用 HTML 和 CSS 创建 3D 文字效果
在网页设计领域，3D 文字效果是最受欢迎的文字效果之一。作为设计师或前端开发人员，应该能够构建 3D 文字效果。今天，我们将研究一种最简单、最直接的渲染 3D 效果文字的技术。
text-shadow 属性是赋予 3D 文字移动效果其设计的关键。应用多个文本阴影的目的是为了使文字呈现 3D 外观，因为如果我们只应用一个（或单一的）文本阴影，则单词中的所有字母都会相同。但是，为了创建 3D 效果，我们需要为每个字母和角度（本质上是 X 和 Y 坐标以及模糊半径）设置不同的阴影厚度。
让我们深入了解本文，以更好地理解如何使用 HTML 和 CSS 创建 3D 文字效果。
使用 text-shadow 属性
顾名思义，此 CSS 属性为文本添加阴影。它接受应用于文本的阴影列表，这些阴影以逗号分隔。其默认设置为 none。它将一个或多个文本阴影效果应用于元素的文本内容。
语法
以下是 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 文本，并为文本提供发光效果。
更新于: 2023-09-08
2K+ 阅读量
广告