当前位置：首页 > news >正文

【纯CSS特效源码】(二)精美的立体字

news 来源：原创 2024/5/20 5:37:21

1.漂浮感立体

在这里插入图片描述

关键处：

text-shadow:2px -2px white, -6px 6px gray;

给字体添加了两层shadow，右上角白色提亮，左下角灰色阴影。
参数解释：例子中2px -2px white，代表右上角白色

第一个参数2px：正数表示从左侧向右推移，负数表示从右侧向左推移。所以它是水平向右2px。
第二个参数-2px：正数表示从顶部向下推移，负数表示将其从底部向上推。所以它是垂直向上2px。
综合就是右上角添加白色阴影。
-6px 6px gray同理

研究一下text-shadow的偏移方向：
在这里插入图片描述

在这里插入图片描述

html

<span class="text-content">FOOLISHSUNDAY</span>

css

@import url('https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.6.0/lxgwwenkaiscreen.css');* {/* Screen version */font-family: "LXGW WenKai Screen", sans-serif;
}
body{height:100vh;background: linear-gradient(45deg, #bfbfbf, gray);display:flex;justify-content:center;align-items:center
}
.text-content{margin:0;color:#E6E6E6;font-size: 6em;letter-spacing:3px;text-shadow:2px -2px #fff,-6px 6px gray;
}

2.立体感文字

在这里插入图片描述
关键处：

text-shadow:1px 1px 1px #919191,1px 2px 1px #919191,1px 3px 1px #919191,...

text-shadow只上两层，文字效果是漂浮感的。
如果想更立体，则可以给text-shadow往垂直方向逐渐加多层浅色阴影，使它立起来。
最后添加几层深色阴影作为字体影子，由于深色不能太硬，所以用rgba函数，使深色带点透明度。

CSS

@import url('https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.6.0/lxgwwenkaiscreen.css');* {/* Screen version */font-family: "LXGW WenKai Screen", sans-serif;
}
body{height:100vh;background: linear-gradient(45deg, #bfbfbf, gray);display:flex;justify-content:center;align-items:center
}
.text-content{margin:0;color:#E6E6E6;font-size: 6em;letter-spacing:3px;text-shadow: 1px 1px 1px #919191,1px 2px 1px #919191,1px 3px 1px #919191,1px 4px 1px #919191,1px 5px 1px #919191,1px 6px 1px #919191,1px 7px 1px #919191,1px 8px 1px #919191,1px 9px 1px #919191,1px 10px 1px #919191,1px 18px 6px rgba(10,10,10,0.4),1px 22px 10px rgba(10,10,10,0.2),1px 25px 35px rgba(10,10,10,0.2),1px 30px 60px rgba(10,10,10,0.4);
}

3.竖起来的立体字

假设我们需要一个竖起来的立体字，则需要在字体背后利用伪元素::before构造一个倾斜的影子
在这里插入图片描述

html

<div class="text-3d">FOOLISHSUNDAY</div>

CSS

@import url('https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.6.0/lxgwwenkaiscreen.css');* {font-family: "LXGW WenKai Screen", sans-serif;
}
body{height:100vh;background: linear-gradient(45deg, #bfbfbf, gray);display:flex;justify-content:center;align-items:center
}.text-3d{margin:0;color:#E6E6E6;font-size: 6em;letter-spacing:3px;
}
.text-3d::before{content:'FOOLISHSUNDAY';position:absolute;color:#000;transform:translate(-72px,23px) scaleY(0.4) skew(60deg);z-index:-1;filter:blur(3px);-webkit-mask-image: linear-gradient(transparent,#000); 
}

4.残影立体感

在这里插入图片描述
关键处：依然是text-shadow

残影效果就是添加多层text-shadow；掌握好方向就ok了；

html

<span class='fontshadow'>FOOLISHSUNDAY</span>

css

body{background-color: #e7e5e4;
}
span {font-family: STXinwei;font-size: 92px;padding: 80px 50px;display: flex;justify-content: center;align-items: center;
}
span.fontshadow {color: #111111;letter-spacing: 0.2em;text-shadow:     1px -1px 1px #444, 2px -2px 1px #555, 3px -3px 1px #666, -1px 2px 1px #737272, -2px 4px 1px #767474, -3px 6px 1px #787777, -4px 8px 1px #7b7a7a, -5px 10px 1px #7f7d7d, -6px 12px 1px #828181, -7px 14px 1px #868585, -8px 16px 1px #8b8a89, -9px 18px 1px #8f8e8d, -10px 20px 1px #949392, -11px 22px 1px #999897, -12px 24px 1px #9e9c9c, -13px 26px 1px #a3a1a1, -14px 28px 1px #a8a6a6, -15px 30px 1px #adabab, -16px 32px 1px #b2b1b0, -17px 34px 1px #b7b6b5, -18px 36px 1px #bcbbba, -19px 38px 1px #c1bfbf, -20px 40px 1px #c6c4c4, -21px 42px 1px #cbc9c8, -22px 44px 1px #cfcdcd, -23px 46px 1px #d4d2d1, -24px 48px 1px #d8d6d5, -25px 50px 1px #dbdad9, -26px 52px 1px #dfdddc, -27px 54px 1px #e2e0df, -28px 56px 1px #e4e3e2;
}