当前位置：首页 > CSS

css制作字幕特效

2026-03-12 05:09:44CSS

CSS 字幕特效实现方法

滚动字幕效果 使用 animation 和 @keyframes 实现文字横向滚动：

.marquee {
  white-space: nowrap;
  overflow: hidden;
  animation: scroll 10s linear infinite;
}
@keyframes scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

打字机效果 通过控制文字显示宽度和动画实现：

.typewriter {
  overflow: hidden;
  border-right: 2px solid;
  white-space: nowrap;
  width: 0;
  animation: typing 3s steps(30) forwards, blink 0.5s step-end infinite;
}
@keyframes typing {
  to { width: 100%; }
}
@keyframes blink {
  from, to { border-color: transparent; }
  50% { border-color: black; }
}

渐显字幕效果 利用透明度变化实现淡入效果：

.fade-in {
  opacity: 0;
  animation: fadeIn 2s ease-in forwards;
}
@keyframes fadeIn {
  to { opacity: 1; }
}

弹跳文字效果 结合 transform 实现弹跳动画：

.bounce {
  display: inline-block;
  animation: bounce 0.5s infinite alternate;
}
@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-10px); }
}

霓虹灯文字效果 使用 text-shadow 创建发光效果：

css制作字幕特效

.neon {
  color: #fff;
  text-shadow: 
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #ff00de,
    0 0 40px #ff00de;
  animation: flicker 1.5s infinite alternate;
}
@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: 
      0 0 5px #fff,
      0 0 10px #fff,
      0 0 20px #ff00de,
      0 0 40px #ff00de;
  }
  20%, 24%, 55% { text-shadow: none; }
}