文本装饰与转换效果

文本装饰基础

CSS中的text-decoration属性是最基础的文本装饰工具。它允许开发者对文本添加下划线、上划线、删除线等简单装饰效果。这个属性实际上是一个简写属性，包含了text-decoration-line、text-decoration-color和text-decoration-style三个子属性。

/* 基本用法 */
.underline {
  text-decoration: underline;
}

.strike-through {
  text-decoration: line-through;
}

.overline {
  text-decoration: overline;
}

/* 组合使用 */
.multiple-lines {
  text-decoration: underline overline;
}

/* 使用子属性 */
.custom-decoration {
  text-decoration-line: underline;
  text-decoration-color: #ff5722;
  text-decoration-style: wavy;
}

现代CSS还引入了text-decoration-thickness属性，可以控制装饰线的粗细：

.thick-underline {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

高级文本装饰效果

渐变下划线

使用线性渐变可以创建更吸引人的下划线效果：

.gradient-underline {
  background-image: linear-gradient(90deg, #ff8a00, #e52e71);
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 3px;
}

悬停动画效果

结合CSS过渡和变换，可以为文本装饰添加交互效果：

.hover-animation {
  position: relative;
  display: inline-block;
}

.hover-animation::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #4a90e2;
  transition: width 0.3s ease;
}

.hover-animation:hover::after {
  width: 100%;
}

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 5px rgba(0,0,0,0.6);
}

文本转换与变形

大小写转换

text-transform属性可以改变文本的大小写形式：

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

文字方向控制

writing-mode属性可以改变文本的排列方向：

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

文字变形效果

使用transform属性可以实现各种文字变形效果：

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

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

高级文本特效

文字描边

text-stroke属性可以为文字添加描边效果：

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

文字填充效果

使用背景渐变和background-clip可以创建渐变填充文字：

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

文字模糊与发光

filter属性可以为文字添加各种视觉效果：

.blur-text {
  filter: blur(1px);
}

.glow-text {
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073;
}

响应式文本装饰

根据视口调整装饰

使用视口单位可以让文本装饰随屏幕大小变化：

.responsive-underline {
  text-decoration: underline;
  text-decoration-thickness: 0.1vw;
}

媒体查询中的装饰变化

@media (max-width: 768px) {
  .responsive-text {
    text-decoration: none;
  }
  
  .responsive-text::after {
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    background: #333;
    margin: 5px auto 0;
  }
}

创意文字效果实现

打字机效果

使用CSS动画可以模拟打字机效果：

.typewriter {
  overflow: hidden;
  border-right: 3px solid orange;
  white-space: nowrap;
  margin: 0 auto;
  animation: 
    typing 3.5s steps(40, end),
    blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}

文字波浪效果

.wavy-text {
  position: relative;
}

.wavy-text span {
  position: relative;
  display: inline-block;
  animation: wave 1s ease-in-out infinite;
  animation-delay: calc(0.1s * var(--i));
}

@keyframes wave {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(-10px) }
}

<div class="wavy-text">
  <span style="--i:1">波</span>
  <span style="--i:2">浪</span>
  <span style="--i:3">文</span>
  <span style="--i:4">字</span>
</div>

性能优化考虑

虽然文本装饰效果可以增强视觉吸引力，但需要注意性能影响：

1. 避免过度使用text-shadow，特别是在移动设备上
2. 复杂的动画效果可能会影响渲染性能
3. 使用will-change属性优化即将变化的属性：

.optimized-text {
  will-change: transform, text-shadow;
}

4. 考虑使用CSS硬件加速：

.hardware-accelerated {
  transform: translateZ(0);
}