css动画选项卡
导读:CSS动画选项卡是一种常见的网页UI设计,通过使用CSS动画来实现选项卡切换时的过渡效果。下面将介绍如何使用CSS来实现这一功能。HTML结构:<div class="tab"><ul class="tab-nav">...
CSS动画选项卡是一种常见的网页UI设计,通过使用CSS动画来实现选项卡切换时的过渡效果。下面将介绍如何使用CSS来实现这一功能。
HTML结构:div class="tab">
ul class="tab-nav">
li class="active">
选项卡1/li>
li>
选项卡2/li>
li>
选项卡3/li>
/ul>
div class="tab-content">
div class="tab-panel active">
选项卡1内容/div>
div class="tab-panel">
选项卡2内容/div>
div class="tab-panel">
选项卡3内容/div>
/div>
/div>
CSS样式:.tab-nav li {
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #eee;
border: 1px solid #ccc;
display: inline-block;
cursor: pointer;
}
.tab-nav li.active {
background-color: #fff;
border-bottom-color: transparent;
}
.tab-panel {
display: none;
animation: fade 1s forwards;
position: absolute;
top: 60px;
left: 0;
width: 100%;
}
.tab-panel.active {
display: block;
}
@keyframes fade {
from {
opacity: 0;
transform: scale(0.5);
}
to {
opacity: 1;
transform: scale(1);
}
}
JavaScript代码:var tabNavs = document.querySelectorAll('.tab-nav li');
var tabPanels = document.querySelectorAll('.tab-panel');
for (var i = 0;
i tabNavs.length;
i++) {
tabNavs[i].addEventListener('click', function(e) {
var currentNav = e.target;
var currentPanel = document.querySelector(currentNav.dataset.target);
for (var j = 0;
j tabNavs.length;
j++) {
tabNavs[j].classList.remove('active');
tabPanels[j].classList.remove('active');
}
currentNav.classList.add('active');
currentPanel.classList.add('active');
}
);
}
以上代码中,HTML结构使用了ul和li标签来实现选项卡的切换,每个选项卡内容使用一个div包裹,CSS样式中定义了选项卡和内容的样式,以及动画效果的实现,JavaScript代码则使用了事件监听器来监听选项卡的点击事件,并根据点击切换显示相应的内容。
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: css动画选项卡
本文地址: https://pptw.com/jishu/432602.html