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);
}