HTML 实现炫酷选项卡效果

本文主要是介绍HTML 实现炫酷选项卡效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在前端开发中，创造出吸引人的交互效果能够极大地提升用户体验。今天，我将分享一段使用 HTML 和 CSS 实现的炫酷选项卡代码，并详细介绍其实现过程。

一、效果展示

我们的选项卡效果具有以下特点：

1. 整体布局美观大方，页面居中显示。
2. 选项卡标签颜色鲜艳，分别为紫色（#a55eea）、蓝色（#45aaf2）和绿色（#26de81），且带有圆角边框和白色文字，鼠标悬停时透明度变为 0.7，增加交互反馈。
3. 选项卡内容区域背景与对应标签颜色一致，通过 3D 旋转效果切换不同的内容，过渡时间为 3 秒，给人一种流畅的视觉感受。

 HTML

这里使用了一个容器 div 来包裹选项卡的各个部分。容器内包含三个单选按钮用于切换选项卡，一个选项卡内容区域 tab_body 和一个标签区域 label。每个标签对应一个单选按钮，用于触发选项卡内容的切换。

<div class="container"><input type="radio" name="aa" id="item1"><input type="radio" name="aa" id="item2"><input type="radio" name="aa" id="item3"><div class="tab_body"><div class="tab_content"><h3>top content</h3><p>this is top content</p></div><div class="tab_content"><h3>top content</h3><p>this is middle content</p></div><div class="tab_content"><h3>top content</h3><p>this is bottom content</p></div></div><div class="label"><label for="item1">top</label><label for="item2">middle</label><label for="item3">bottom</label></div>
</div>

CSS

* {padding: 0;margin: 0;
}
body {height: 100vh;display: flex;justify-content: center;align-items: center;
}
.container {width: 700px;height: 350px;display: flex;justify-content: space-between;align-items: center;perspective: 1300px;
}
input {display: none;
}
.container.tab_body {width: 500px;height: 300px;background: pink;position: relative;transform-style: preserve-3d;transition-duration: 3s;
}
.container.label {width: 150px;height: 350px;
}
.container.label label {display: block;width: 150px;height: 100px;margin: 5px 0px 20px;background: #a55eea;text-align: center;line-height: 100px;color: #ffffff;border-radius: 70px;
}
.container.label label:hover {opacity: 0.7;cursor: pointer;
}
.container.label label:nth-child(2) {background: #45aaf2;
}
.container.label label:nth-child(3) {background: #26de81;
}
.container.tab_body.tab_content {width: 100%;height: 100%;background: #a55eea;display: flex;flex-direction: column;justify-content: center;align-items: center;color: #ffffff;position: absolute;
}
.container.tab_body.tab_content:nth-child(1) {background: #a55eea;transform: translateY(-150px) rotateX(90deg);
}
.container.tab_body.tab_content:nth-child(2) {background: #45aaf2;transform: translateZ(150px);
}
.container.tab_body.tab_content:nth-child(3) {background: #26de81;transform: translateY(150px) rotateX(-90deg);
}
#item1:checked ~.tab_body {transform: rotateX(-90deg);
}
#item2:checked ~.tab_body {transform: rotateX(0deg);
}
#item3:checked ~.tab_body {transform: rotateX(90deg);
}

这篇关于HTML 实现炫酷选项卡效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---