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

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;
}