css字幕制作

CSS字幕制作方法

使用CSS制作字幕效果可以通过动画和文本样式实现，适用于视频、滚动新闻或动态展示场景。

基本字幕样式 通过@keyframes定义动画，结合position和transform控制移动效果：

.subtitle {
  position: absolute;
  white-space: nowrap;
  color: white;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  font-size: 24px;
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

固定位置字幕 适合静态显示的文字说明，添加背景增强可读性：

.caption {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0,0,0,0.7);
  padding: 10px 20px;
  border-radius: 5px;
  max-width: 80%;
}

响应式字幕 通过媒体查询适配不同设备：

@media (max-width: 768px) {
  .subtitle {
    font-size: 16px;
    animation-duration: 8s;
  }
}

淡入淡出效果 结合透明度变化实现柔和过渡：

@keyframes fade {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
.fade-subtitle {
  animation: fade 4s ease-in-out infinite;
}

多行字幕处理 使用flexbox布局管理多行文本：

.multiline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}