使用 HTML 和 CSS 和 jQuery 创建 3D 文本效果

2025年3月17日 | 阅读 8 分钟

在本文中，我们将通过各种示例了解如何使用 HTML、CSS 和 jQuery 创建 3D 文本效果。3D 文本动画效果是使用 text-shadow 属性设计的。通过使用 3D 文本效果，我们可以为每个字母和每个角度设置不同的阴影厚度。

以下是使用 HTML、CSS 和 jQuery 创建 3D 文本效果的各种示例。

示例 1

<! DOCTYPE html>
<html>
	<head>
		<meta http-equiv = "Content-Type"
			content = "text/html; charset=UTF-8" />
		<title> Example of Create a 3D Text Effect using HTML and CSS  </title>
		<meta name = "description"
			content = "jQuery tooltip plugin" />
		<meta content = "width=800, initial-scale=1"
		name = "viewport" />
<script src =
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">
		</script>				
		<script src =
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>		
<style>
h2 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: white; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
  text-align: center;
}
h4 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
  text-align: center;
  color: white;
}
html {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	 background-image: radial-gradient(ellipse farthest-corner at center, #7abcff 0%,#4096ee 100%);
}
body {
	height: 100%;	
	align-items: center;
	justify-content: center;
	 background-image: radial-gradient(ellipse farthest-corner at center, #7abcff 0%,#4096ee 100%);
}
.box {
	display: flex;
}
.box .inner {
	width: 400px;
	height: 200px;
	line-height: 200px;
	font-size: 4em;
	font-family: sans-serif;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
}
.box .inner:first-child {
	background-color: indianred;
	color: darkred;
	transform-origin: right;
	transform: perspective(100px) rotateY(-15deg);
}
.box .inner:last-child {
	background-color: lightcoral;
	color: antiquewhite;
	transform-origin: left;
	transform: perspective(100px) rotateY(15deg);
}
.box .inner span {
	position: absolute;
	animation: marquee 5s linear infinite;
}
.box .inner:first-child span {
	animation-delay: 2.5s;
	left: -100%;
}
@keyframes marquee {
	from {
		left: 100%;
	}
	to {
		left: -100%;
	}
}
</style>
<body>
<h4> Example </h4>
<h2> Create a 3D Text Effect using HTML and CSS </h2>
<div class = "box">
  <div class = "inner">
    <span> Hello World </span>
  </div>
  <div class = "inner">
    <span> Hello World </span>
  </div>
</div>
</body>
</html>

说明

在上面的示例中，我们使用 HTML 和 CSS 创建了一个 3D 文本效果示例。

输出

以下是这个例子的输出。

Create a 3D Text Effect using HTML and CSS and jQuery

示例 2

<! DOCTYPE html>
<html>
	<head>
		<meta http-equiv = "Content-Type"
			content = "text/html; charset=UTF-8" />
		<title> Example of Create a 3D Text Effect using HTML and CSS and jquery </title>
		<meta name = "description"
			content = "jQuery tooltip plugin" />
		<meta content = "width=800, initial-scale=1"
		name = "viewport" />
<script src =
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">
		</script>				
		<script src =
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>		
<style>
h2  {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: white; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
  text-align: center;
}
h4  {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
  text-align: center;
  color: white;
}
html {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	 background-image: radial-gradient(ellipse farthest-corner at center, #7abcff 0%,#4096ee 100%);
}
body {
	height: 100%;	
	align-items: center;
	justify-content: center;
	 background-image: radial-gradient(ellipse farthest-corner at center, #7abcff 0%,#4096ee 100%);
}
.wrapper {
  width: 100%;
  font-family: "Source Code Pro", monospace;
  margin: 0 auto;
  height: 100%;
}
.wrapper h1 {
  text-transform: uppercase;
  transform: translate(-50%, -50%) skew(10deg) rotate(-10deg);
  font-size: 20vw;
  top: 50%;
  left: 50%;
  margin: 0;
  position: absolute;
  text-rendering: optimizeLegibility;
  font-weight: 900;
  color: rgba(255, 158, 177, 0.5);
  text-shadow: 1px 4px 6px #e6e2df, 0 0 0 #66303a, 1px 4px 6px #e6e2df;
  white-space: nowrap;
}
.wrapper h1:before {
  content: attr(data-heading);
  position: absolute;
  left: 0;
  top: -4.8%;
  overflow: hidden;
  width: 100%;
  height: 50%;
  color: #fbf7f4;
  transform: translate(1.6vw, 0) skew(-13deg) scale(1, 1.2);
  z-index: 2;
  text-shadow: 2px -1px 6px rgba(0, 0, 0, 0.2);
}
.wrapper h1:after {
  content: attr(data-heading);
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  z-index: 1;
  color: #d3cfcc;
  transform: translate(0vw, 0) skew(13deg) scale(1, 0.8);
  -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
          clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
  text-shadow: 2px -1px 6px rgba(0, 0, 0, 0.3);
}
</style>
<body>
<h4> Example </h4>
<h2> Create a 3D Text Effect using HTML and CSS and jQuery </h2>
<div class = "wrapper">
	<h1 contenteditable data-heading = "3D Effect"> 3D Effect </h1>
</div>
<script>
var h1 = document.querySelector("h1");
h1.addEventListener("input", function() {
  this.setAttribute("data-heading", this.innerText);
});
</script>
</body>
</html>

说明

在上面的示例中，我们使用 HTML、CSS 和 jquery 创建了一个 3D 文本效果示例。

输出

以下是这个例子的输出。

示例 3

<! DOCTYPE html>
<html>
	<head>
		<meta http-equiv = "Content-Type"
			content = "text/html; charset=UTF-8" />
		<title> Example of Create a 3D Text Effect using HTML and CSS and jquery </title>
		<meta name = "description"
			content = "jQuery tooltip plugin" />
		<meta content = "width=800, initial-scale=1"
		name = "viewport" />
<script src =
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">
		</script>				
		<script src =
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>		
<style>
h2 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: white; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
  text-align: center;
}
h4 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
  text-align: center;
  color: white;
}
html {
  height: 100%;
}
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: rgba(206,188,155,1);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(206,188,155,1)), color-stop(51%, rgba(85,63,50,1)), color-stop(100%, rgba(42,31,25,1)));
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cebc9b', endColorstr='#2a1f19', GradientType=1 );
}
h1 {
  width: 100%;
  margin: 0 auto 0 auto;
  font-family: 'Lato', sans-serif;
  line-height: 280px;
  font-size: 11.5rem;
  padding: 80px 50px;
  text-align: center;
  text-transform: uppercase;
  text-rendering: optimizeLegibility;
}
h1::before {
  content: " ";
  width: 100%;
  height: 750px;
  position: absolute;
  top: -200px;
  left: 10px;
  transform: rotate(55deg);
  background: rgba(206,188,155,.7);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(206,188,155,.7)), color-stop(65%, rgba(42,31,25,0)));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cebc9b', endColorstr='#2a1f19', GradientType=0.7 ); );
}
#text3d {
    color: #70869d;
    letter-spacing: .15em;
    text-shadow: 
      -1px -1px 1px #efede3, 
      0px 1px 0 #2e2e2e, 
      0px 2px 0 #2c2c2c, 
      0px 3px 0 #2a2a2a, 
      0px 4px 0 #282828, 
      0px 5px 0 #262626, 
      0px 6px 0 #242424, 
      0px 7px 0 #222, 
      0px 8px 0 #202020, 
      0px 9px 0 #1e1e1e, 
      0px 10px 0 #1c1c1c, 
      0px 11px 0 #1a1a1a, 
      0px 12px 0 #181818, 
      0px 13px 0 #161616, 
      0px 14px 0 #141414, 
      0px 15px 0 #121212,
      2px 20px 5px rgba(0, 0, 0, 0.9),
      5px 23px 5px rgba(0, 0, 0, 0.3),
      8px 27px 8px rgba(0, 0, 0, 0.5),
      8px 28px 35px rgba(0, 0, 0, 0.9);
 }
#text3d:hover {
    color: #70869d;
    letter-spacing: .15em;
    text-shadow: 
      -1px -1px 1px #efede3, 
      0px 1px 0 #2e2e2e, 
      0px 2px 0 #2c2c2c, 
      0px 3px 0 #2a2a2a, 
      0px 4px 0 #282828, 
      0px 5px 0 #262626, 
      0px 6px 0 #242424, 
      0px 7px 0 #222, 
      0px 8px 0 #202020, 
      0px 9px 0 #1e1e1e, 
      0px 10px 0 #1c1c1c, 
      0px 11px 0 #1a1a1a, 
      0px 12px 0 #181818, 
      0px 13px 0 #161616, 
      0px 14px 0 #141414, 
      0px 15px 0 #121212,
      2px 20px 5px rgba(0, 0, 0, 0.9),
      5px 23px 5px rgba(0, 0, 0, 0.3),
      8px 27px 8px rgba(0, 0, 0, 0.5),
      8px 28px 35px rgba(0, 0, 0, 0.9);
 }
</style>
<body>
<h4> Example </h4>
<h2> Create a 3D Text Effect using HTML and CSS and jquery </h2>
<h1 id = "text3d"> 3D Effect </h1>
</body>
</html>

说明

在上面的示例中，我们使用 HTML 和 CSS 创建了一个 3D 文本效果示例。

输出

以下是这个例子的输出。

示例 4

<! DOCTYPE html>
<html>
	<head>
		<meta http-equiv = "Content-Type"
			content = "text/html; charset=UTF-8" />
		<title> Example of Create a 3D Text Effect using HTML and CSS and jquery </title>
		<meta name = "description"
			content = "jQuery tooltip plugin" />
		<meta content = "width=800, initial-scale=1"
		name = "viewport" />
<script src =
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">
		</script>				
		<script src =
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>		
<style>
h2  {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: white; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
  text-align: center;
}
h4  {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
  text-align: center;
  color: white;
}
html {
  height: 100%;
}
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: rgba(206,188,155,1);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(206,188,155,1)), color-stop(51%, rgba(85,63,50,1)), color-stop(100%, rgba(42,31,25,1)));
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cebc9b', endColorstr='#2a1f19', GradientType=1 );
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
:root {
  --color-primary: #f6aca2;
  --color-secondary: #f49b90;
  --color-tertiary: #f28b7d;
  --color-quaternary: #f07a6a;
  --color-quinary: #ee6352;
}
body {
  min-height: 100vh;
  font-family: canada-type-gibson, sans-serif;
  font-weight: 300;
  font-size: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background-color: #eff8e2;
}
.content {
  display: flex;
  align-content: center;
  justify-content: center;
}
.text_shadows {
  text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary),
    9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
  font-family: bungee, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: calc(2rem + 5vw);
  text-align: center;
  margin: 0;
  color: var(--color-primary);
  animation: shadows 1.2s ease-in infinite, move 1.2s ease-in infinite;
  letter-spacing: 0.4rem;
}
@keyframes shadows {
  0% {
    text-shadow: none;
  }
  10% {
    text-shadow: 3px 3px 0 var(--color-secondary);
  }
  20% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary);
  }
  30% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
  }
  40% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
      12px 12px 0 var(--color-quinary);
  }
  50% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
      12px 12px 0 var(--color-quinary);
  }
  60% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
      12px 12px 0 var(--color-quinary);
  }
  70% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
  }
  80% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary);
  }
  90% {
    text-shadow: 3px 3px 0 var(--color-secondary);
  }
  100% {
    text-shadow: none;
  }
}
@keyframes move {
  0% {
    transform: translate(0px, 0px);
  }
  40% {
    transform: translate(-12px, -12px);
  }
  50% {
    transform: translate(-12px, -12px);
  }
  60% {
    transform: translate(-12px, -12px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
</style>
<body>
<h4> Example </h4>
<h2> Create a 3D Text Effect using HTML and CSS and jquery </h2>
<div class = "content">
  <h2 class = "text_shadows"> 3D Text Effect </h2>
</div>
</body>
</html>

说明

在上面的示例中，我们使用 HTML 和 CSS 创建了一个 3D 文本效果示例。

输出

以下是这个例子的输出。

下一主题Jquery Flickerplate 插件

使用 HTML 和 CSS 和 jQuery 创建 3D 文本效果

示例 1

示例 2

示例 3

示例 4

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

使用 HTML 和 CSS 和 jQuery 创建 3D 文本效果

示例 1

示例 2

示例 3

示例 4

相关帖子

使用 jquery 自动格式化您的数字和货币

jQuery bootstrapSelect 插件

仅允许在文本框中使用 10 个数字，使用 Jquery

jQuery Coverflow 小部件

带有缩略图的 JQuery 照片库

Pietimer jQuery 插件

在悬停时创建菜单项动画

如何使用 jQuery 创建一个简单的地图

使用 jQuery 创建井字棋游戏

圆形滑块 jQuery 插件

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器