純CSS 斑馬投影文字

效果展示

思路分析

層級思路

從展示的效果可以猜到這個效果由3層文字組成。

• 表面一層黑色文字
• 中間一層白色文字
• 最低的一層是斑馬條紋文字

要實作多層文字，我首先想到的是文字投影

text-shadow

，但通常

text-shadow

隻能投個純色出來。

于是思路要改一下，黑色和白色層是投影，斑馬條紋是真正的文字本身。

斑馬紋思路

看到這種條紋效果，我想到了背景圖漸變。

1. 直接使用圖檔實作斑馬紋路
2. 使用

   background-image

   裡的線性漸變

   linear-gradient

第一種思路不推薦，因為作為一個有追求的前端能不使用圖檔就盡量别使用圖檔！

漸變紋路的想法确定後，就可以使用

background-clip: text

規定背景圖案渲染到文本中。

這個方法經常用來做文字特效。

要将背景渲染到文本中還需要把文字原本的顔色設定成透明，這樣才能把背景圖案顯示出來。

color: transparent;
-webkit-text-fill-color: transparent;           

-webkit-text-fill-color

是用來指定文字填充顔色，如果同時出現

-webkit-text-fill-color

和

color

，

-webkit-text-fill-color

将覆寫

color

的顔色。

但

-webkit-text-fill-color

并不是标準屬性，這裡之是以這樣寫，是因為怕

color

被其他更高權重的規則覆寫了。

編碼

<template>
  <div class="zebra__shadow__text">Zebra</div>
</template>

<style>
.zebra__shadow__text {
  font-size: 100px; /* 文字大點，效果更明顯 */
  font-weight: bold; /* 文字粗點，這樣效果更明顯 */
  color: transparent; /* 設定文字填充顔色為透明，這樣可以把背景顯示出來 */
  -webkit-text-fill-color: transparent; /* 使用一個非标準的方法覆寫文字填充顔色，以防color被其他代碼覆寫 */
  text-shadow: 6px -6px #000, 4px -4px #fff; /* 設定頂層黑色投影和中層白色投影 */
  background-image: linear-gradient(135deg, #fff 0%, #fff 25%, #000 25%, #000 50%, #fff 50%, #fff 75%, #000 75%, #000 100%);   /* 使用 #fff 和 #000 畫出條紋效果，并傾斜135度 */
  background-size: 6px 6px; /* 背景圖大小，控制斑馬紋的粗細 */
  background-repeat: repeat; /* 不斷重複渲染背景圖 */
  -webkit-background-clip: text; /* 将背景渲染到文本中（相容性寫法） */
  background-clip: text; /* 将背景渲染到文本中 */
}
</style>           

推薦

本例展示位址