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, #ffcc33);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

文字描边效果

使用 -webkit-text-stroke 为文字添加描边（仅部分浏览器支持）。

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

文字发光效果

结合 text-shadow 和动画实现动态发光效果。

.glow-text {
  text-shadow: 0 0 5px #fff, 0 0 10px #ff00de;
  animation: glow 1.5s infinite alternate;
}
@keyframes glow {
  from { text-shadow: 0 0 5px #fff; }
  to { text-shadow: 0 0 20px #ff00de, 0 0 30px #ff0066; }
}

3D立体文字

通过多层 text-shadow 模拟3D效果。

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

打字机动画

使用 animation 和 steps() 模拟逐字显示效果。

.typewriter {
  overflow: hidden;
  border-right: 2px solid #000;
  white-space: nowrap;
  animation: typing 3s steps(40) forwards;
}
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

文字悬浮放大

通过 transform 实现悬停时缩放效果。

.hover-scale {
  transition: transform 0.3s;
}
.hover-scale:hover {
  transform: scale(1.2);
}

注意事项

• 部分效果（如渐变文字）需浏览器前缀支持。
• 动画性能优化：优先使用 transform 和 opacity。
• 响应式设计：确保特效在不同屏幕尺寸下适配。