English (US) 
Español (ES) 
Português (PT) 
Français (CA) 
Español (MX) 
Español (VE) 
Español (CO) 
Español (AR) 
Português (BR) 
Quechua (PE) 
Guaraní (PY) 
简体中文 (ZH) 
繁體中文 (HK) 
日本語 (JP) 
한국어 (KR) 
हिन्दी (HI) 
Pilipino (PH) 
ไทย (TH) 
Tiếng Việt (VN) 
Bahasa Melayu (MY) 
Bahasa Indonesia (ID) 
বাংলা (BD) 
اردو (PK) 
සිංහල (LK) 
ភាសាខ្មែរ (KH) 
English (UK) 
Français (FR) 
Deutsch (DE) 
Italiano (IT) 
Русский (RU) 
Nederlands (NL) 
Türkçe (TR) 
Polski (PL) 
Svenska (SE) 
Norsk (NO) 
Dansk (DK) 
Suomi (FI) 
Ελληνικά (GR) 
Čeština (CZ) 
Magyar (HU) 
Română (RO) 
Български (BG) 
Српски (RS) 
Українська (UA) 
HTML5颜色渐变3D文字特效
由 
Deepseek提供支持
Deepseek提供支持
广告
今天我们要分享一款HTML5 3D文字特效，文字的颜色是渐变的，同时文字带有阴影，更加凸显了3D立体的视觉效果。
HTML代码
<h1 class="text"><span>Gradient 3D text</span></h1>CSS代码
body {
background-color: #272727;
}
h1 {
font-family: "Arial", sans-serif;
font-size: 85px;
text-align: center;
font-weight: bold;
color: #3d3d3d;
margin-top: 200px;
}
.text {
position:relative;
}
.text:after {
content: '';
position:absolute;
display:block;
top:0;
left:0;
height:100%;
width:100%;
background: -moz-linear-gradient(top, rgba(39,39,39,1) 0%, rgba(39,39,39,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(39,39,39,1)), color-stop(100%,rgba(39,39,39,0)));
background: -webkit-linear-gradient(top, rgba(39,39,39,1) 0%,rgba(39,39,39,0) 100%);
background: -o-linear-gradient(top, rgba(39,39,39,1) 0%,rgba(39,39,39,0) 100%);
background: -ms-linear-gradient(top, rgba(39,39,39,1) 0%,rgba(39,39,39,0) 100%);
background: linear-gradient(to bottom, rgba(39,39,39,1) 0%,rgba(39,39,39,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#272727', endColorstr='#00272727',GradientType=0 );
}
span {
text-shadow:
0 -1px 0 #858585,
0 1px 10px rgba(0,0,0,.6),
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.2),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 7px 10px rgba(0,0,0,.25),
0 15px 10px rgba(0,0,0,.2),
0 25px 15px rgba(0,0,0,.15);
}
温馨提示 : 非特殊注明，否则均为©李联华的博客网原创文章，本站文章未经授权禁止任何形式转载;来自:俄亥俄州·哥伦布 ，欢迎您的访问!
文章链接：https://www.lilianhua.com/html5-color-gradient-3d-text-effect.html
文章链接：https://www.lilianhua.com/html5-color-gradient-3d-text-effect.html
请先登录才能参与答题
