css制作名字特效

文字阴影效果

使用 text-shadow 属性为文字添加阴影，增强立体感。通过调整阴影的偏移、模糊半径和颜色实现不同风格。

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

渐变色文字

通过 background-clip 和 text-fill-color 实现渐变色文字效果。

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

动画闪烁效果

使用 @keyframes 创建闪烁动画，结合 opacity 或颜色变化。

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.name {
  animation: blink 2s infinite;
}

3D 旋转效果

通过 transform 属性实现 3D 旋转，需配合透视（perspective）。

.name {
  display: inline-block;
  transform-style: preserve-3d;
  animation: rotate 5s infinite linear;
}
@keyframes rotate {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

描边文字

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

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

悬浮放大效果

通过 transition 和 transform: scale() 实现悬停时放大。

.name {
  transition: transform 0.3s;
}
.name:hover {
  transform: scale(1.1);
}

打字机效果

结合 @keyframes 和 width 或 steps() 模拟逐字显示。

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}
.name {
  overflow: hidden;
  white-space: nowrap;
  animation: typing 3s steps(20) forwards;
}

光晕效果

利用 filter: drop-shadow() 创建发光效果。

.name {
  filter: drop-shadow(0 0 8px rgba(255, 255, 0, 0.8));
}