当前位置：首页 > CSS

css制作频谱

2026-03-11 17:09:58CSS

使用 CSS 制作频谱动画

频谱动画可以通过 CSS 的动画和变形效果实现，结合 HTML 的结构和 CSS 的关键帧动画来模拟动态频谱。以下是几种常见的方法：

css制作频谱

基础频谱条动画

通过多个条形元素和 @keyframes 动画实现高度变化的频谱效果。

css制作频谱

<div class="spectrum">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

.spectrum {
  display: flex;
  align-items: flex-end;
  height: 100px;
  gap: 5px;
}

.bar {
  width: 20px;
  background: linear-gradient(to top, #ff00ff, #00ffff);
  animation: spectrum 1.5s infinite ease-in-out;
}

@keyframes spectrum {
  0%, 100% { height: 20%; }
  50% { height: 80%; }
}

.bar:nth-child(1) { animation-delay: 0.1s; }
.bar:nth-child(2) { animation-delay: 0.3s; }
.bar:nth-child(3) { animation-delay: 0.5s; }
.bar:nth-child(4) { animation-delay: 0.7s; }
.bar:nth-child(5) { animation-delay: 0.9s; }

使用 CSS 变量动态控制高度

结合 JavaScript 动态更新 CSS 变量，模拟音频频谱数据变化。

<div class="spectrum-js">
  <div class="bar-js" style="--height: 30%"></div>
  <div class="bar-js" style="--height: 60%"></div>
  <div class="bar-js" style="--height: 40%"></div>
</div>

.spectrum-js {
  display: flex;
  height: 150px;
  gap: 8px;
  align-items: flex-end;
}

.bar-js {
  width: 30px;
  background: linear-gradient(to top, #ff8a00, #e52e71);
  height: var(--height);
  transition: height 0.3s ease;
}

// 模拟动态数据更新
setInterval(() => {
  const bars = document.querySelectorAll('.bar-js');
  bars.forEach(bar => {
    bar.style.setProperty('--height', `${Math.random() * 80 + 10}%`);
  });
}, 300);

复杂频谱动画（SVG + CSS）

通过 SVG 路径和 CSS 动画实现波浪形频谱效果。

<svg class="wave-spectrum" viewBox="0 0 200 100">
  <path d="M0 50 C20 30, 40 70, 60 50 S100 30, 120 50 S160 70, 180 50 S200 30, 200 50" />
</svg>

.wave-spectrum {
  width: 100%;
  height: 100px;
}

.wave-spectrum path {
  fill: none;
  stroke: #00f7ff;
  stroke-width: 2;
  animation: wave 2s linear infinite;
}

@keyframes wave {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50px); }
}