css tab切换动画
时间: 2023-11-09 15:02:00 浏览: 61
可以使用CSS3的transition属性来实现tab切换动画。具体实现方法如下:
1. 首先,给每个tab添加一个共同的类名,比如.tab。
2. 给当前选中的tab添加一个.active类名,用于区分当前选中的tab。
3. 使用CSS3的transition属性来设置动画效果,比如设置背景色渐变、边框颜色渐变等。
4. 当切换tab时,通过JavaScript来添加或删除.active类名,从而触发动画效果。
以下是一个简单的示例代码:
HTML代码:
```
<div class="tabs">
<div class="tab active">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
</div>
```
CSS代码:
```
.tabs {
display: flex;
}
.tab {
padding: 10px;
cursor: pointer;
border: 1px solid #ccc;
border-bottom: none;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.tab.active {
background-color: #f5f5f5;
border-color: #ccc;
}
.tab:hover {
background-color: #f5f5f5;
}
```
JavaScript代码:
```
const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
tabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
});
});
```