html文字输出特效

基础文字动画效果

通过CSS animation属性结合关键帧（@keyframes）可实现多种文字动态效果。

示例：渐变色文字

<style>
  p {
    font-size: 24px;
    animation: colorChange 3s infinite;
  }
  @keyframes colorChange {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
  }
</style>
<p>渐变文字效果</p>

文本高亮与闪烁

使用CSS text-shadow和透明度变化实现霓虹灯效果。

示例：霓虹闪烁文字

<style>
  .neon {
    font-size: 36px;
    color: #fff;
    text-shadow: 0 0 5px #fff, 0 0 10px #ff00de;
    animation: glow 2s infinite alternate;
  }
  @keyframes glow {
    from { text-shadow: 0 0 10px #ff00de; }
    to { text-shadow: 0 0 20px #ff00de; }
  }
</style>
<div class="neon">霓虹文字</div>

逐字显示效果（打字机动画）

通过JavaScript控制字符逐个显示,配合CSS实现节奏感。

示例：打字机效果

<style>
  .typewriter {
    border-right: 2px solid black;
    white-space: nowrap;
    overflow: hidden;
    width: 20ch;
  }
</style>
<div class="typewriter" id="text">正在输入...</div>
<script>
  const text = "逐字显示效果演示";
  let i = 0;
  function type() {
    document.getElementById('text').innerHTML += text[i];
    i++;
    if (i < text.length) setTimeout(type, 200);
  }
  type();
</script>

背景文字燃烧效果

利用CSS滤镜和动画模拟火焰动态。

示例：燃烧文字

<style>
  .fire-text {
    font-size: 80px;
    color: orange;
    text-shadow: 0 -1px 4px #FF4500, 1px -3px 10px #FF6347;
    animation: flicker 0.5s infinite;
  }
  @keyframes flicker {
    0% { text-shadow: 0 -1px 4px #FF4500, 1px -3px 10px #FF6347; }
    50% { text-shadow: 0 -2px 6px #FF4500, 2px -4px 12px #FF6347; }
    100% { text-shadow: 0 -1px 4px #FF4500, 1px -3px 10px #FF6347; }
  }
</style>
<div class="fire-text">火焰文字</div>

3D旋转文字效果

结合CSS transform属性实现空间旋转。

示例：3D旋转文字

<style>
  .rotate3d {
    font-size: 30px;
    animation: spin 5s linear infinite;
  }
  @keyframes spin {
    from { transform: perspective(500px) rotateX(0) rotateY(0); }
    50% { transform: perspective(500px) rotateX(180deg) rotateY(360deg); }
    to { transform: perspective(500px) rotateX(360deg) rotateY(720deg); }
  }
</style>
<div class="rotate3d">三维旋转</div>

特效实现方式对比表

常见问题与解答

Q1：如何控制动画的播放速度？
A：通过调整animation-duration属性值（单位：秒或毫秒），例如将animation: spin 5s改为animation: spin 2s可加快旋转速度，对于JavaScript实现的特效，可修改setTimeout的时间参数。

Q2：低版本浏览器无法显示动画怎么办？
A：1. 添加浏览器前缀（如-webkit-、-moz-）；
　　2. 提供静态样式降级方案，
　　“`css
p {
color: black; / 默认颜色 /
animation: colorChange 3s infinite; / 现代浏览器特效 /
}
@keyframes colorChange { … } / 需包含完整定义 /
/ 旧版IE需使用JS判断并添加class /