关于前端:纯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>

举荐

本例展现地址

本例仓库，欢送 Star

纯 CSS 实现 突变文字

点赞 + 关注 + 珍藏 = 学会了