下面我将详细讲解 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;
}
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO) - Python技术站