明白了！您想要的是一个带透明渐变导航栏的

明白了！您想要的是一个带透明渐变导航栏的视频展示组件。这个设计很时尚，我来帮您具体实现这个交互效果：

**HTML结构建议**：
```html
<header class="nav-bar">
<!-- 左侧导航 -->
<div class="nav-left">
<a href="#page1">选项1</a>
<a href="#page2">选项2</a>
</div>

<!-- 居中LOGO -->
<div class="nav-center">
<img src="logo.png" alt="品牌logo">
</div>

<!-- 右侧功能区 -->
<div class="nav-right">
<button class="icon-btn" onclick="openModal(1)">○</button>
<button class="icon-btn" onclick="openModal(2)">○</button>
</div>
</header>

<video class="hero-video" poster="cover.jpg" autoplay muted loop>
<source src="video.mp4" type="video/mp4">
</video>
```

**CSS关键样式**：
```css
.nav-bar {
position: fixed;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 5%;
color: white;
background: transparent;
transition: all 0.3s ease;
z-index: 100;
}

.nav-bar:hover {
background: white;
color: black;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* 保持LOGO始终可见 */
.nav-bar:hover .nav-center img {
filter: invert(100%);
}
```

如果要实现滚动时触发变色效果而不是悬停，可以用JavaScript添加scroll事件监听。您更倾向于哪种交互方式呢？或者需要我补充弹窗组件的实现细节？