当前位置：首页 > CSS

css制作歌词

2026-02-12 19:16:37CSS

使用CSS制作歌词效果

通过CSS可以实现歌词的滚动、高亮显示等效果，结合HTML和JavaScript可以实现更动态的交互。

HTML结构

<div class="lyrics-container">
  <div class="lyrics-line active">这是第一行歌词</div>
  <div class="lyrics-line">这是第二行歌词</div>
  <div class="lyrics-line">这是第三行歌词</div>
</div>

基础CSS样式

css制作歌词

.lyrics-container {
  width: 300px;
  height: 400px;
  overflow-y: auto;
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.lyrics-line {
  padding: 10px 0;
  color: #666;
  transition: all 0.3s ease;
}

.lyrics-line.active {
  color: #000;
  font-weight: bold;
  font-size: 1.2em;
}

实现歌词滚动效果

添加平滑滚动效果需要配合JavaScript控制：

const lyrics = document.querySelectorAll('.lyrics-line');
let currentActive = 0;

function updateLyrics() {
  lyrics.forEach((line, index) => {
    if(index === currentActive) {
      line.classList.add('active');
      line.scrollIntoView({ behavior: 'smooth', block: 'center' });
    } else {
      line.classList.remove('active');
    }
  });

  currentActive = (currentActive + 1) % lyrics.length;
}

setInterval(updateLyrics, 2000);

添加动画效果

为歌词添加更丰富的动画：

css制作歌词

@keyframes lyric-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.lyrics-line.active {
  animation: lyric-pulse 0.5s infinite;
  text-shadow: 0 0 5px rgba(0,0,0,0.2);
}

响应式设计

确保在不同设备上都能正常显示：

@media (max-width: 600px) {
  .lyrics-container {
    width: 90%;
    height: 300px;
    font-size: 14px;
  }

  .lyrics-line.active {
    font-size: 16px;
  }
}

卡拉OK式逐字高亮

实现逐字变色效果需要更复杂的JavaScript配合：

function karaokeEffect(element) {
  const text = element.textContent;
  element.innerHTML = '';

  text.split('').forEach((char, i) => {
    const span = document.createElement('span');
    span.textContent = char;
    span.style.transition = `color ${i * 0.1}s`;
    element.appendChild(span);

    setTimeout(() => {
      span.style.color = '#ff0000';
    }, i * 100);
  });
}

// 对当前活动的歌词行应用效果
karaokeEffect(document.querySelector('.lyrics-line.active'));

这些方法可以根据实际需求组合使用，创造出各种歌词显示效果。