CSS文本特效

各种文本特效。

颜色分割文本

效果

实现

h1添加data属性，存放伪元素文本：

1	<h1 data-text="Split Colors">Split Colors</h1>

使用polygon来剪切伪元素文本，使其部分可见，然后设置绝对定位覆盖h1文本：

h1 {
  position: relative;
}

h1::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  color: #ff6161;
  content: attr(data-text);
  clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
}

最后，确保文本是可选择的：

h1::before {
	/* ... */
	pointer-events: none; /* Make text selectable */
}

如果没有pointer-events属性，::before伪元素文本将不能被选中。

渐变文本

效果

实现

通过linear-gradient设置渐变背景，然后通过background-clip: text裁剪背景，最后设置文本颜色color透明或半透明使背景可见。

兼容性：background-clip

h1 {
  background: linear-gradient(30deg, #9ED8DB 40%, #007B82 60%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

动画渐变文本

在渐变文本的基础上添加动画。

h1 {
   /* ... */
   animation: animatedGradient 2s infinite forwards;
}

@keyframes animatedGradient {
   from {
    background-size: 100%;
  }

  to {
    background-size: 300%;
  }
}

图像背景文字

在渐变文本的基础上将文字的渐变背景修改为图像背景。

h1 {
   background: url(url) no-repeat 50%;
   background-size: cover;
   /* ... */
}

颜色分割文本

效果

实现

渐变文本

效果

实现

动画渐变文本

图像背景文字

视频背景文字

文字霓虹灯效果

参考