css文字制作特效

文字阴影效果

使用text-shadow属性为文字添加阴影效果。可以设置阴影的水平偏移、垂直偏移、模糊半径和颜色。

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

渐变文字效果

通过背景渐变和background-clip属性实现文字渐变效果。需要配合-webkit-text-fill-color使用。

.gradient-text {
  background: linear-gradient(to right, #ff8a00, #da1b60);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

文字描边效果

使用-webkit-text-stroke属性为文字添加描边效果。可以设置描边宽度和颜色。

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

文字发光效果

结合text-shadow属性创建发光效果。使用半透明的颜色和较大的模糊半径。

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

文字动画效果

使用CSS动画让文字产生动态效果。可以创建闪烁、颜色变化等动画。

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.blinking-text {
  animation: blink 2s infinite;
}

3D文字效果

通过多层阴影叠加创建3D立体文字效果。

.three-d-text {
  color: #fff;
  text-shadow: 
    1px 1px 0 #ccc,
    2px 2px 0 #bbb,
    3px 3px 0 #aaa,
    4px 4px 0 #999,
    5px 5px 0 #888;
}

文字变形效果

使用transform属性对文字进行旋转、倾斜等变形操作。

.transformed-text {
  transform: skewX(-15deg) rotate(-5deg);
  display: inline-block;
}

文字背景图案

将图片作为文字背景显示，需要配合background-clip属性使用。

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