HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)

下面我将详细讲解 HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO) 的完整攻略。

1. 理解需求和设计思路

首先要明确需求，该动画效果是实现一个具有切换效果的 TAB 栏，可以通过点击 TAB 来切换不同的内容。

设计思路：

• 使用 HTML 的 ul 和 li 标签来构建基本的 TAB 栏结构
• 使用 CSS3 实现动画效果
• 使用 JavaScript 实现点击 TAB 可以切换不同内容的功能

2. 绘制基本结构

在 HTML 文件中添加 ul 和 li 标签，并编写基本的 CSS 样式，设置每个 TAB 的样式。

<ul>
  <li class="tab active">Tab 1</li>
  <li class="tab">Tab 2</li>
  <li class="tab">Tab 3</li>
</ul>

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tab {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 5px 5px 0 0;
  margin-right: 10px;
}

.active {
  background-color: #fff;
  border-bottom: none;
}

此时页面上已经可以看到 TAB 栏的基本结构。

3. CSS3 实现动画效果

使用 CSS3 的 transform 属性，配合 transition 属性实现动画效果。这里的思路是使用 transform 的 translateX 属性来移动当前活动的 TAB，达到切换效果。

首先，在 CSS 中添加以下代码：

.tab.active ~ .slide {
  transform: translateX(calc((100% + 10px) * var(--index)));
}

这里使用了 CSS3 变量。在 ul 标签上添加 --index 变量来表示当前活动的 TAB 的下标。

接下来，添加一个 div，用于实现滑动效果。

<div class="slide"></div>

设置样式：

.slide {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: calc(100% / 3);
  background-color: #4285f4;
  transition: transform 0.3s ease-in-out;
}

这里的宽度使用 calc 函数计算得出，因为本例中有三个 TAB。

此时，如果打开页面，已经可以看到一个滑动的效果了。

4. JavaScript 实现点击 TAB 切换内容

最后一步是通过 JavaScript 实现点击 TAB 切换不同内容的功能。

添加以下代码：

var tabs = document.querySelectorAll('.tab');
var slide = document.querySelector('.slide');
var index = 0;

tabs.forEach(function(tab, k) {
  tab.addEventListener('click', function() {
    index = k;
    slide.style.setProperty('--index', index);
    document.querySelector('.tab.active').classList.remove('active');
    tab.classList.add('active');
  });
});

这里的代码比较简单，先获取所有的 TAB 元素和滑动的元素，再循环遍历每个 TAB，为其添加点击事件。在点击事件中，改变变量 --index 的值，并切换 TAB 的类名。

至此，一个完整的 HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO) 就完成了。

示例说明1

如果需要将 TAB 的数量变更为 4，需要改变的地方只有 CSS。

首先，在 ul 标签中添加一个 li 标签：

<ul>
  <li class="tab active">Tab 1</li>
  <li class="tab">Tab 2</li>
  <li class="tab">Tab 3</li>
  <li class="tab">Tab 4</li>
</ul>

然后修改 .slide 标签的宽度：

.slide {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: calc(100% / 4);
  background-color: #4285f4;
  transition: transform 0.3s ease-in-out;
}

示例说明2

如果需要更改滑动效果的颜色，只需要简单修改样式即可。

.slide {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: calc(100% / 3);
  background-color: #FF0000; /* 修改此处 */
  transition: transform 0.3s ease-in-out;
}