html3d样式,CSS+HTML<3D文字效果>

效果图:

image.png

代码如下：

Document

html,

body {

height: 100%;

overflow: hidden;

}

body {

margin: 0;

}

h2 {

font-weight: 600;

/* 大写转换 */

text-transform: uppercase;

text-align: center;

font-size: 10em;

}

/* .filter-shadow {

color: transparent;

background: linear-gradient(180deg, #fefefe, #bbb);

-webkit-background-clip: text;

-webkit-filter: drop-shadow(-1px -1px white) drop-shadow(1px 1px gray) drop-shadow(1px 1px #7a7a7a) drop-shadow(1px 1px #757575) drop-shadow(1px 1px #707070) drop-shadow(1px 1px #6b6b6b) drop-shadow(1px 1px #666666) drop-shadow(1px 1px #616161) drop-shadow(1px 1px #5c5c5c) drop-shadow(1px 1px #575757) drop-shadow(1px 1px #525252) drop-shadow(1px 1px #4d4d4d) drop-shadow(12px 12px 30px rgba(0, 0, 0, 0.2)) drop-shadow(12px 12px 10px rgba(0, 0, 0, 0.2));

} */

.text-shadow {

color: #f4f4f4;

text-shadow: -1px -1px white, 1px 1px gray, 2px 2px #7a7a7a, 3px 3px #757575, 4px 4px #707070, 5px 5px #6b6b6b, 6px 6px #666666, 7px 7px #616161, 8px 8px #5c5c5c, 9px 9px #575757, 10px 10px #525252, 11px 11px #4d4d4d, 18px 18px 30px rgba(0, 0, 0, 0.4), 18px 18px 10px rgba(0, 0, 0, 0.4);

}

Text Shadow

image.png

Document

body,

html {

height: 100%;

}

body {

margin: 0;

display: flex;

justify-content: center;

align-items: center;

background: #1abc9c;

}

.foo {

font-family: 'Raleway', sans-serif;

color: white;

font-size: 10em;

margin: auto;

text-align: center;

}

.foo {

font-family: "Arial Black";

text-shadow: 0.66913px 0.74314px 0 #16a085, 1.33826px 1.48629px 0 #16a185, 2.00739px 2.22943px 0 #16a186, 2.67652px 2.97258px 0 #16a186, 3.34565px 3.71572px 0 #16a186, 4.01478px 4.45887px 0 #16a286, 4.68391px 5.20201px 0 #16a287, 5.35304px 5.94516px 0 #16a287, 6.02218px 6.6883px 0 #16a387, 6.69131px 7.43145px 0 #16a387, 7.36044px 8.17459px 0 #16a388, 8.02957px 8.91774px 0 #16a388, 8.6987px 9.66088px 0 #17a488, 9.36783px 10.40403px 0 #17a488, 10.03696px 11.14717px 0 #17a488, 10.70609px 11.89032px 0 #17a489, 11.37522px 12.63346px 0 #17a589, 12.04435px 13.37661px 0 #17a589, 12.71348px 14.11975px 0 #17a589, 13.38261px 14.8629px 0 #17a68a, 14.05174px 15.60604px 0 #17a68a, 14.72087px 16.34919px 0 #17a68a, 15.39px 17.09233px 0 #17a68a, 16.05913px 17.83548px 0 #17a78b, 16.72827px 18.57862px 0 #17a78b, 17.3974px 19.32177px 0 #17a78b, 18.06653px 20.06491px 0 #17a88b, 18.73566px 20.80806px 0 #17a88b, 19.40479px 21.5512px 0 #17a88c, 20.07392px 22.29434px 0 #17a88c, 20.74305px 23.03749px 0 #17a98c, 21.41218px 23.78063px 0 #17a98c, 22.08131px 24.52378px 0 #17a98d, 22.75044px 25.26692px 0 #17aa8d, 23.41957px 26.01007px 0 #17aa8d, 24.0887px 26.75321px 0 #17aa8d, 24.75783px 27.49636px 0 #17aa8e, 25.42696px 28.2395px 0 #18ab8e, 26.09609px 28.98265px 0 #18ab8e, 26.76522px 29.72579px 0 #18ab8e, 27.43435px 30.46894px 0 #18ab8e, 28.10349px 31.21208px 0 #18ac8f, 28.77262px 31.95523px 0 #18ac8f, 29.44175px 32.69837px 0 #18ac8f, 30.11088px 33.44152px 0 #18ad8f, 30.78001px 34.18466px 0 #18ad90, 31.44914px 34.92781px 0 #18ad90, 32.11827px 35.67095px 0 #18ad90, 32.7874px 36.4141px 0 #18ae90, 33.45653px 37.15724px 0 #18ae91, 34.12566px 37.90039px 0 #18ae91, 34.79479px 38.64353px 0 #18af91, 35.46392px 39.38668px 0 #18af91, 36.13305px 40.12982px 0 #18af91, 36.80218px 40.87297px 0 #18af92, 37.47131px 41.61611px 0 #18b092, 38.14044px 42.35926px 0 #18b092, 38.80958px 43.1024px 0 #18b092, 39.47871px 43.84554px 0 #18b193, 40.14784px 44.58869px 0 #18b193, 40.81697px 45.33183px 0 #18b193, 41.4861px 46.07498px 0 #18b193, 42.15523px 46.81812px 0 #19b293, 42.82436px 47.56127px 0 #19b294, 43.49349px 48.30441px 0 #19b294, 44.16262px 49.04756px 0 #19b294, 44.83175px 49.7907px 0 #19b394, 45.50088px 50.53385px 0 #19b395, 46.17001px 51.27699px 0 #19b395, 46.83914px 52.02014px 0 #19b495, 47.50827px 52.76328px 0 #19b495, 48.1774px 53.50643px 0 #19b496, 48.84653px 54.24957px 0 #19b496, 49.51566px 54.99272px 0 #19b596, 50.1848px 55.73586px 0 #19b596, 50.85393px 56.47901px 0 #19b596, 51.52306px 57.22215px 0 #19b697, 52.19219px 57.9653px 0 #19b697, 52.86132px 58.70844px 0 #19b697, 53.53045px 59.45159px 0 #19b697, 54.19958px 60.19473px 0 #19b798, 54.86871px 60.93788px 0 #19b798, 55.53784px 61.68102px 0 #19b798, 56.20697px 62.42417px 0 #19b898, 56.8761px 63.16731px 0 #19b899, 57.54523px 63.91045px 0 #19b899, 58.21436px 64.6536px 0 #19b899, 58.88349px 65.39674px 0 #1ab999, 59.55262px 66.13989px 0 #1ab999, 60.22175px 66.88303px 0 #1ab99a, 60.89089px 67.62618px 0 #1ab99a, 61.56002px 68.36932px 0 #1aba9a, 62.22915px 69.11247px 0 #1aba9a, 62.89828px 69.85561px 0 #1aba9b, 63.56741px 70.59876px 0 #1abb9b, 64.23654px 71.3419px 0 #1abb9b, 64.90567px 72.08505px 0 #1abb9b, 65.5748px 72.82819px 0 #1abb9c, 66.24393px 73.57134px 0 #1abc9c, 66.91306px 74.31448px 0 #1abc9c;

}

Hello!