css文字制作特效

文字阴影效果

使用 text-shadow 属性为文字添加阴影，支持多阴影叠加。参数依次为水平偏移、垂直偏移、模糊半径和颜色。

.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

渐变文字效果

通过 background-clip 和 text-fill-color 实现渐变文字。需配合浏览器前缀使用。

.gradient-text {
  background: linear-gradient(45deg, #ff3366, #ffcc00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

文字描边效果

使用 -webkit-text-stroke 为文字添加描边，兼容性需注意。

.stroke-text {
  -webkit-text-stroke: 1px #000;
  color: white;
}

文字发光效果

结合 text-shadow 与模糊半径实现发光效果。

.glow-text {
  text-shadow: 0 0 10px #00ffaa, 0 0 20px #00ffaa;
}

文字动画效果

通过 @keyframes 实现动态效果，如颜色变化或位移。

@keyframes colorChange {
  0% { color: red; }
  50% { color: blue; }
  100% { color: green; }
}
.animated-text {
  animation: colorChange 3s infinite;
}

3D立体文字

利用多层 text-shadow 模拟3D效果。

.3d-text {
  color: white;
  text-shadow: 
    1px 1px 0 #999, 
    2px 2px 0 #888,
    3px 3px 0 #777;
}

文字模糊与清晰切换

使用 filter 属性控制模糊度，适合悬停交互。

.blur-text {
  filter: blur(2px);
  transition: filter 0.3s;
}
.blur-text:hover {
  filter: blur(0);
}

文字背景图案

通过 background-image 为文字填充图案。

.pattern-text {
  background-image: url('pattern.png');
  -webkit-background-clip: text;
  color: transparent;
}

注意事项

• 部分属性（如 -webkit-text-stroke）需考虑浏览器兼容性。
• 动画效果避免过度使用，以免影响性能。
• 渐变和图案背景在低对比度环境下可能降低可读性。