資料結構
網路
關係資料庫管理系統
作業系統
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+ 閱讀量
廣告