本文將詳細介紹CSS文本效果

凸版印刷效果

　　這種效果尤其適用於中等亮度背景配上深色文字的場景；但它也可用於深色底、淺色字的場景，只要文字不是黑色並且背景不是純黑或純白就行

【淺色背景深色文本】

  background:hsl(210,13%,60%);
  color:hsl(210,13%,30%);
  text-shadow:0 .03em .03em hsla(0,0%,100%,.8);

【深色背景淺色文本】

  background:hsl(210,13%,40%);
  color:hsl(210,13%,75%);
  text-shadow:0 -1px 1px black;

空心字效果

  color:white;
  text-shadow:1px 1px black,-1px -1px black,1px -1px black,-1px 1px black;

發光效果

  background:#203;
  color:#ffc;
  text-shadow:0 0 .1em,0 0 .3em;

模糊效果

div{
  width:200px;
  background:#203;
  color:transparent;
  text-shadow:0 0 .1em white,0 0 .3em white;
  transition:.5s;
}
div:hover{
  color:white;
}  

　　鼠標移入後，文字由模糊變清晰

凸起效果

　　文字凸起(偽3D)效果的主要思路就是使用一長串累加的投影，不設模糊並以1px的跨度逐漸錯開，使顏色逐漸變暗，然後在底部加一層強烈模糊的暗投影，從而模擬完整的立體效果

  background:#58a;
  color:white;
  text-shadow:0 1px hsl(0,0%,85%),0 2px hsl(0,0%,80%),0 3px hsl(0,0%,75%),0 4px hsl(0,0%,70%),0 5px hsl(0,0%,65%),0 5px 10px black;

閃爍效果

@keyframes blink-smooth{50%{color:transparent;}}
div{
  animation:.5s blink-smooth infinite alternate linear;
}

打字效果

　　有些時候，希望一段文本中的字符逐個顯現，模擬出一種打字的效果。這個效果在技術類網站中尤為流行，用等寬字體可以營造出一種終端命令行的感覺

　　核心思路就是讓容器的寬度成為動畫的主體把所有文本包裹在這個容器中，然後讓它的寬度從0開始以步進動畫的方式、一個字一個字地擴張到它應有的寬度

　　這個方法是局限的，它並不適用於多行文本

@keyframes typing{0%{width:0;}}
@keyframes caret{50%{border-color:transparent;}}
div{
  width:9em;
  animation:typing 4s steps(9) infinite ,caret .5s steps(1) infinite;
  white-space: nowrap;
  overflow: hidden;
  border-right:1px solid;
}

環形文字

【SVG】

　　使用SVG來實現環形文字較為簡單

<style>
div{width: 100px;height: 100px;border:1px solid black;}
svg{margin-left: -20px;}
</style>
<div>
  <svg height="100" version="1.1" xmlns="http://www.w3.org/2000/svg" >
    <path id="my_path"  d="M 50 50 a 20 20, 0, 1, 1, 0 1 Z" fill="none"/>
    <text>
      <textPath xlink:href="#my_path">小火柴的藍色理想</textPath>
    </text>
  </svg>
</div>

文字融合

　　模糊濾鏡疊加對比度濾鏡可以產生融合效果

　　[註意]文字融合的思路來自chokcoco的博文CSS濾鏡技巧與細節

　　1、模糊濾鏡filter: blur()： 給圖像設置高斯模糊效果

　　2、對比度濾鏡filter: contrast()： 調整圖像的對比度

　　當它們同時使用時，產生了奇妙的融合現象，通過對比度濾鏡把高斯模糊的模糊邊緣給隱藏，利用高斯模糊實現融合效果

<style>
.box{filter: contrast(20);background: #fff;overflow: hidden;}
.left,.right{float: left;width: 100px;height: 100px;border-radius: 50%;filter: blur(6px);}
.left{background-color: black;}
.right{background-color: red;margin-left:-20px;}
</style>
<div class="box">
    <div class="left"></div>
    <div class="right"></div>    
</div>

　　為其中一個元素添加動畫後，效果更明顯

<style>
.box{filter: contrast(20);background: #fff;overflow: hidden;padding:10px;}
.left,.right{display:inline-block;width: 100px;height: 100px;border-radius: 50%;filter: blur(6px);}
.left{background-color: black;position:absolute;left:0;animation: move 2s infinite alternate;}
@keyframes move{100%{left:250px;}}
.right{background-color: red;margin-left:120px;}
</style>
<div class="box">
    <div class="left"></div>
    <div class="right"></div>    
</div>

【文字顯隱效果】

　　首先，利用blur()和contrast()實現一個文字顯隱效果

<style>
.box{filter: contrast(1);background: #fff;overflow: hidden;padding:10px;font:bold 20px/20px ‘宋體‘;}
.text{filter:blur(0px);transition:1s;}
.box:hover{filter: contrast(20);}
.box:hover .text{filter:blur(3px);}
</style>
<div class="box">
    <span class="text">小火柴的藍色理想</span>
</div>

　　鼠標移入後，文字消失；移出後，文字恢復

【文字融合】

　　下面來配合字符間距letter-spacing來實現文字融合效果

<style>
.box{filter: contrast(1);background: #fff;overflow: hidden;padding:10px;font:bold 20px/20px ‘宋體‘;}
.text{filter:blur(0px);transition:1s;}
.box:hover{filter: contrast(20);}
.box:hover .text{filter:blur(3px);letter-spacing: -1em}
</style>
<div class="box">
    <span class="text">小火柴的藍色理想</span>
</div>

　　鼠標移入後，文字融合；移出後，文字恢復

CSS3 文本效果