css字幕制作

CSS字幕制作方法

使用CSS创建字幕效果可以通过动画和文本样式实现。以下是几种常见的方法：

滚动字幕效果

通过@keyframes和transform属性实现水平滚动：

.marquee {
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  animation: marquee 10s linear infinite;
}

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

打字机效果

利用steps()函数和宽度动画模拟打字：

.typewriter {
  overflow: hidden;
  border-right: .15em solid orange;
  white-space: nowrap;
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

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

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

垂直滚动字幕

适用于多行文本的垂直滚动效果：

.vertical-scroll {
  height: 100px;
  overflow: hidden;
  position: relative;
}

.vertical-scroll p {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 100px;
  text-align: center;
  animation: vertical-scroll 10s linear infinite;
}

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

高级字幕样式技巧

添加渐变背景

.subtitle {
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.5), rgba(0,0,0,0));
  padding: 10px;
  color: white;
}

响应式字幕设计

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

3D文字效果

.3d-text {
  color: #fff;
  text-shadow: 
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #ff0080,
    0 0 30px #ff0080;
}

实现字幕同步

结合JavaScript控制CSS动画可以实现更精确的同步：

const subtitles = document.querySelectorAll('.subtitle');
subtitles.forEach((sub, index) => {
  sub.style.animationDelay = `${index * 0.5}s`;
});

这些CSS技术可以组合使用，根据具体需求调整动画时间、缓动函数和样式属性，创造出各种字幕效果。